HTML: использование 'name' или 'id' для создания якорей

Быстрый ответ

Основываясь на современных реалиях, рекомендуется использовать атрибут id вместо name при создании HTML-якорей. id позволяет уникально идентифицировать элементы на странице, что критически важно для стилизации с помощью CSS и работы в JavaScript. В спецификации HTML5 особо акцентировано применение id для обозначения якорей:

<!-- Создание ссылки на раздел 'Советы' -->
<a href="#tips">Перейти к советам</a>

<!-- Создание якоря для этой ссылки -->
<div id="tips">Важная информация: вы находитесь в разделе советов!</div>

Атрибут name уже считается нежелательным для якорей, поэтому для соответствия стандартам чистого кода HTML5 выбирайте id.

Лучшие практики: Создание якорей с использованием 'id'

Следуя современным стандартам, вы обеспечиваете оптимизацию и долговечность кода:

• Используйте уникальные ID: Убедитесь, что каждый id уникален на странице, чтобы избежать конфликтов.
• Сочетайте CSS и id: Используйте псевдокласс :target для стилизации элемента, идентифицируемого через id в URL.
• Сокращайте код: Нет необходимости оборачивать элементы в теги <a> лишь ради возможности якорения. Отказывайтесь от лишних украшений!
• Соблюдайте порядок в HTML: id можно и следует использовать непосредственно на элементах, таких как <h1> или <section>, для структурирования контента.

Советы от экспертов: Как профессионально использовать 'id'

Ознакомьтесь с этими рекомендациями по продвинутому использованию id:

• Особенности id: Элементы с id становятся глобальными переменными в браузере, что обеспечивает ускоренный и упрощенный доступ.
• Приоритет прозрачности: Не используйте name и id на одном и том же элементе, чтобы избежать путаницы в DOM.
• Будьте в тренде HTML: Создавайте якоря с помощью id и оставайтесь в курсе развития технологии веб-разметки.

Визуализация

Представим ситуацию, в которой столкнутся name vs id за честь быть названным HTML-якорем:

Сравните это с вечеринкой в эксклюзивном особняке (🏠):

- 🏷️ Бейджи с 'name': Некогда популярные, но теперь они утратили свою былую значимость (и поддержку браузеров).
- 🆔 Карточки с 'id': Они являются нововведением, признанным и узнаваемым всеми современными браузерами.

Выбор id можно сравнить с выбором изысканного блюда, тогда как name более похож на недельный запас сухпайков:

🏠 -> 🚪 [Вход] -> 🎉 [Большой зал #id='disco-thunder']

name может иметь еще несколько сторонников, но:

🏠 -> 🚪 [Вход] -> 🛑 [Лифт не работает? #name='vertigo-madness']

Сделайте правильный выбор: id поможет вам избежать замешательства в темных коридорах пути.

Сравнение совместимости: 'id' против 'name'

При выборе между id и name крайне важно учитывать вопросы совместимости:

• Браузеры прошлой эпохи: Древние браузеры (такие как Netscape 4) могли не поддерживать id. Однако сегодня id совместим со всеми браузерами.
• Доступность: id способствуют улучшению работы скринридеров и ассистивных технологий, повышая доступность контента.
• Привлекательность для поисковых систем: Грамотно использованные id формируют четкую структуру страницы, что положительно сказывается на SEO.

Полезные материалы

1. HTML Standard — Руководство по использованию атрибута id в HTML.
2. Ссылки в HTML документах — Подробная информация про свойства id и name.
3. id – HTML — Справочник по id.
4. <a>: Элемент якоря — Историческая справка по атрибуту name.
5. Плавный скроллинг — Руководство по улучшению навигации с использованием плавного перехода к якорю id.
6. HTML Ссылки Гиперссылки — Сборник профессиональных советов для создания HTML-якорей и ссылок.
7. Поддержка атрибута 'id' — Отчет о совместимости браузеров с атрибутом id.