Использовать name или id для HTML‑якорей?

Для создания якорей в веб‑страницах рекомендуется использовать атрибут id, а не name. Оба подхода позволяют создавать рабочие ссылки, например http://example.com/#foo, но использование id является современным, семантически корректным методом, который соответствует текущим веб‑стандартам и лучшим практикам. Подход <h1 id="foo">Foo Title</h1> превосходит устаревший <a name="foo"/>, поскольку он валиден в HTML5, обеспечивает лучшую доступность и более устойчив к будущим изменениям.

Содержание

• Исторический контекст и депрекейшн
• Технические различия между name и id
• [Доступность и семантические соображения](#доступность-и-семантические- соображения)
• Совместимость с браузерами и будущее
• Лучшие практики реализации якорей

Исторический контекст и депрекейшн

Атрибут name для якорей имеет долгую историю в HTML, но официально депрекейшен в HTML5. Согласно Webmasters Stack Exchange, «Для HTML5 атрибут name теперь устарел, поэтому следует использовать id вместо name».

Депрекейшн произошёл, потому что веб‑среда перешла к более последовательной системе идентификации. Атрибут name изначально служил нескольким целям:

• именованные якоря (<a name="foo">)
• идентификация полей форм (<input name="email">)
• имена целевых фреймов (<iframe name="content">)

Атрибут id обеспечивает более чистый, унифицированный подход к идентификации элементов во всех HTML‑элементах.

Технические различия между name и id

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

Требования к уникальности

• id: Должен быть уникальным в пределах всего документа. Каждый элемент может иметь только один id, и два элемента не могут иметь одинаковое значение id.
• name: Не обязателен к уникальности, что может вызвать конфликты.

Использование элементов

• id: Может применяться к любому HTML‑элементу.
• name: Изначально предназначен для конкретных элементов, таких как якоря, элементы управления формами и iframe.

Сравнение примеров

<!-- Современный подход (рекомендуется) -->
<h1 id="section1">Introduction</h1>
<p id="section2">Main content</p>
<div id="section3">Conclusion</div>

<!-- Устаревший подход (депрекейшен) -->
<a name="section1"></a>Introduction
<a name="section2"></a>Main content
<a name="section3"></a>Conclusion

Как объясняет GeeksforGeeks, «Когда якорь используется с помощью id, достаточно одного якоря. Основной якорь будет использоваться как ссылка для перехода к любой секции и будет содержать атрибут href, который будет содержать id…»

Доступность и семантические соображения

Использование id обеспечивает значительные преимущества для доступности по сравнению с устаревшим атрибутом name:

Поддержка экранных читалок

• id: Лучше распознается вспомогательными технологиями.
• name: Ограниченная поддержка в современных экранных читалках.

Семантическая ясность

• id: Создаёт чёткую связь между идентификатором и фактическим элементом контента.
• name: Создаёт абстрактную точку якоря, которая может быть оторвана от видимого контента.

Совместимость с ARIA

Атрибут id беспрепятственно интегрируется с спецификациями ARIA (Accessible Rich Internet Applications). Как отмечает Erik Kroes - Accessibility Consultant, «aria-labelledby — это атрибут, который принимает один или несколько «ID». Доступные имена этих элементов объединяются и формируют доступное имя родительского элемента».

Важно для доступности: При создании ссылок-якорей убедитесь, что они содержат видимый текст, описывающий пункт назначения. Избегайте пустых элементов <a id="top"></a>, так как они не предоставляют контекста вспомогательным технологиям.

Совместимость с браузерами и будущее

Текущая поддержка браузеров

• id подход: Работает во всех современных браузерах и даже в старых, например IE6.
• name подход: Всё ещё поддерживается для обратной совместимости, но считается устаревшим.

Будущее

Использование id гарантирует, что ваш код останется совместимым по мере развития веб‑стандартов. Атрибут name для якорей, скорее всего, будет полностью удалён в будущих спецификациях HTML.

Согласно Stack Overflow, «<a name> недействителен в HTML5 в текущем виде» и «На самом деле он не относится к другим «именованным элементам». Что касается атрибутов name, он применяется только к <a name>. Однако его не следует использовать авторами. Он должен быть соблюдён пользовательскими агентами для старых HTML‑страниц».

Лучшие практики реализации якорей

Рекомендуемый подход

<h2 id="getting-started">Getting Started</h2>

Ссылка на якорь

<!-- Ссылка внутри той же страницы -->
<a href="#getting-started">Перейти к Getting Started</a>

<!-- Ссылка с внешней страницы -->
<a href="http://example.com/#getting-started">Прямая ссылка на раздел</a>

Дополнительные рекомендации

1. Используйте описательные, осмысленные id, отражающие содержание.
2. Избегайте специальных символов и пробелов в значениях id.
3. Сохраняйте согласованность с вашей схемой именования.
4. Учитывайте дружелюбность к URL при выборе значений id.
5. Проверьте навигацию по якорям с клавиатурой для доступности.

Когда стоит использовать оба атрибута

В редких случаях, когда необходимо поддерживать очень старые браузеры, но при этом сохранять современные стандарты, можно использовать оба атрибута:

<h1 id="section1" name="section1">Section Title</h1>

Однако это обычно не рекомендуется, так как добавляет ненужную сложность, а атрибут name не приносит современных преимуществ.

Ресурс Position Is Everything подчёркивает, что «лучшее место для добавления ID — после символа решётки в конце URL‑адреса страницы. Включив решётку и имя ID в атрибут href элемента, программисты могут ссылаться на якоря с самой страницы».

Заключение

1. Всегда отдавайте предпочтение id над name при создании якорей в современной разработке HTML.
2. Подход <h1 id="foo"> семантически превосходит <a name="foo"/>, поскольку сохраняет структуру документа и обеспечивает функциональность якоря.
3. Доступность значительно лучше с атрибутом id, так как он корректно интегрируется с вспомогательными технологиями.
4. Будьте готовыми к будущему — избегайте устаревших атрибутов name для якорей.
5. Используйте описательные, осмысленные значения id, которые отражают содержание и хорошо работают в URL.

Приняв подход с id, вы создадите более чистый, поддерживаемый код, который соответствует текущим веб‑стандартам и обеспечивает лучший пользовательский опыт на всех устройствах и с вспомогательными технологиями.

Источники

1. Should I make HTML Anchors with ‘name’ or ‘id’? - Stack Overflow
2. html5 - Name attribute is obsolete, what is the correct behavior when dealing with anchors? - Webmasters Stack Exchange
3. Should I make Anchors with ‘name’ or ‘id’ in HTML ? - GeeksforGeeks
4. HTML Name vs. ID Attributes: Their Main Differences and Uses - Position Is Everything
5. What is the difference between id and name attributes in HTML? - Tutorialspoint
6. Should I make HTML Anchors with “name” or “id”? - Matheus Mello
7. Are your Anchor Links Accessible? - Amber Wilson
8. What you should (not) put inside an anchor link - Erik Kroes
9. Quick tip: Creating valid and accessible links - The A11Y Project
10. a HTML element - Best practices and accessibility considerations - WebReference