Должен ли я делать HTML-якоря с "именем" или "id"?

когда кто-то хочет обратиться к какой-то части веб-страницы с "http://example.com/#foo " метод, если использовать

<h1><a name="foo"/>Foo Title</h1>

или

<h1 id="foo">Foo Title</h1>

Они оба работают, но равны ли они или имеют семантические различия?

14 ответов


согласно спецификации HTML 5, 5.9.8 переход к идентификатору фрагмента:

для HTML-документов (и типа text/html MIME) необходимо следовать следующей модели обработки, чтобы определить, что такое указанная часть документа.

  1. проанализируйте URL-адрес, и пусть fragid является компонентом URL-адреса.
  2. если fragid является пустой строкой, то указанная часть документа является верхней документа.
  3. если в DOM есть элемент, который имеет идентификатор, точно равный fragid, то первый такой элемент в древовидном порядке является указанной частью документа; остановите алгоритм здесь.
  4. если есть a элемент в DOM, который имеет атрибут name, значение которого точно равно fragid, тогда первый такой элемент в древовидном порядке является указанной частью документа; остановите алгоритм здесь.
  5. в противном случае, нет указанной части документа.

Итак, он будет искать id="foo", а затем последует до name="foo"

Edit: как указано @hsivonen, в HTML5 a элемент не имеет атрибута name. Однако вышеуказанные правила по-прежнему применяются к другим именованным элементам.


вы не должны использовать <h1><a name="foo"/>Foo Title</h1> в любом вкусе HTML служил как text/html, потому что синтаксис пустого элемента XML не поддерживается в text/html. Однако,<h1><a name="foo">Foo Title</a></h1> ОК в HTML4. Он недействителен в HTML5 в его нынешнем виде.

<h1 id="foo">Foo Title</h1> нормально в HTML4 и HTML5. Это не будет работать в Netscape 4, но вы, вероятно, будете использовать дюжину других функций, которые не работают в Netscape 4.


Я должен сказать, если вы собираетесь ссылаться на эту область на странице... например, Пейдж.html#foo и Foo Title - это не ссылка, которую вы должны использовать:

<h1 id="foo">Foo Title</h1>

Если вместо этого поставить <a> ссылка вокруг него вы заголовок будет зависеть от <a> для CSS на вашем сайте. Это просто дополнительная наценка, и она вам не понадобится. Он настоятельно рекомендует идти с размещением идентификатора на заголовке, не только он лучше сформирован, но и позволит вам либо адрес этого объекта в Javascript или CSS.


Википедия широко использует эту функцию следующим образом:

<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>

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

также не забывайте, что вы можете использовать это не только с пролетами, но и с divs или даже ячейками таблицы, а затем у вас есть доступ к псевдоклассу :target на элементе. Просто следите за тем, чтобы не изменять ширину, как с полужирным текстом, потому что это перемещает контент, который беспокоящий.

названные якоря - мой голос, чтобы избежать:

  • " имена и идентификаторы находятся в одном пространстве имен..."- Два атрибута с одинаковым пространством имен-это просто безумие. Скажем так, уже устарел.
  • "элементы якоря без href atribute" - опять же, природа элемента (гиперссылка или нет) определяется наличием atribute?! Двойное безумие. Здравый смысл подсказывает избегать этого.
  • если вы когда-нибудь стиль якорь без псевдо-класса стиль применяется к каждому. В CSS3 вы можете обойти это с помощью селекторов атрибутов (или того же стиля для каждого псевдокласса), но все же это обходной путь. Обычно это не возникает, потому что вы выбираете цвета для каждого псевдокласса, а подчеркивание по умолчанию имеет смысл удалить, что делает его таким же, как и другой текст. Но вы когда-нибудь решите сделать свои ссылки смелыми, это вызовет проблемы.
  • Netscape 4 может не поддерживать функцию id, но все еще неизвестный атрибут не вызовет никаких проблем. Вот что для меня называется совместимостью.

<h1 id="foo">Foo Title</h1>

это то, что следует использовать. Не используйте якорь, если вам не нужна ссылка.


метод ID не будет работать в старых браузерах, метод имени привязки будет устаревшим в новых версиях HTML... Я бы пошел с id.


нет семантической разницы; тенденция в стандартах заключается в использовании id, а не name. Однако есть различия, которые могут привести к предпочтению name в некоторых случаях. Спецификация HTML 4.01 предлагает советы:

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

  • атрибут id может действовать как больше чем просто имя привязки (например, селектор таблиц стилей, идентификатор обработки и т. д.).
  • некоторые старые агенты пользователей не поддерживают якоря, созданные с помощью атрибута id.
  • атрибут name позволяет более богатые имена привязки (с сущностями).

Heads up для пользователей JavaScript:все идентификаторы становятся глобальными переменными в окне.

<h1 id="foo">Foo Title</h1>

только что создал JS global:

window.foo

значение window.foo будет HTMLElement на h1.

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

<h1 name="foo">Foo Title</h1>

У меня есть веб-страница, состоящая из нескольких вертикально уложенных контейнеров div, идентичных по формату и отличающихся только серийным номером. Я хотел скрыть имя якоря в верхней части каждого div, поэтому наиболее экономичным решением оказалось включение якоря в качестве идентификатора в открывающий тег div, i.e,

<div id="[serial number]" class="topic_wrapper">

просто замечание о разметке форма разметки в предыдущих версиях HTML предоставляла точку привязки. Формы разметки в HTML5 с использованием атрибута id, хотя в основном эквивалентны, требуют идентификации элемента, почти все из которых обычно должны содержать контент.

можно использовать пустой промежуток или div, например, но это использование выглядит и пахнет вырождением.

одна мысль-использовать элемент wbr для этой цели. Wbr имеет пустое content model и просто объявляет, что разрыв строки возможен; это все еще немного безвозмездное использование тега разметки, но гораздо меньше, чем безвозмездные подразделения документов или пустые текстовые промежутки.


второй пример присваивает уникальный идентификатор рассматриваемому элементу. Затем этим элементом можно управлять или обращаться к нему с помощью DHTML.

первый, с другой стороны, устанавливает именованное местоположение в документе, сродни закладке. Прикрепленный к "якорю", он имеет смысл.


Как насчет использования атрибута name для старых браузеров и атрибута id для новых браузеров. Оба варианта будут использоваться, и метод резервного копирования будет реализован по умолчанию!!!


в html 5,id="" атрибут определяет уникальный идентификатор элемента, который также является привязкой для фрагментной ссылки. В предыдущих стандартах html name="" атрибут <a> элемент определяет якорь для фрагментной ссылки. Я рекомендую что-то вроде:
<a name="foo" id="foo"></a><h1>Foo Title</h1>
Потому что поддержка id="" атрибут немного пятнистый (хотя последние версии всех основных браузеров поддерживают его, релизы, которые не являются не более чем несколько лет[и это лучше не сломать что-то, если нет веской причины]). Он совместим, и он не стилизует все, что находится в элементе link'D, поскольку закрывающий все еще находится вне элемента, но он по-прежнему действителен во всех текущих стандартах.

убедитесь, что name="" и id="" атрибуты <a> элементы одинаковы.


вся концепция "именованный якорь" использует атрибут name по определению. Вы должны просто придерживаться имени, но атрибут ID может быть удобен для некоторых ситуаций javascript.

Как и в комментариях, вы всегда можете использовать оба для хеджирования своих ставок.