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

Question

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

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

или

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

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

Answer 1

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

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

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

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

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

Answer 2

Вы не должны использовать <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.

Answer 3

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

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

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

Answer 4

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

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

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

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

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

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

Answer 5

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

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

Answer 6

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

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

Только что создал глобальный JS:

window.foo

Значение window.foo будет HTMLElement для h1.

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

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

Answer 7

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

Answer 8

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

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

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

Answer 9

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

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

Answer 10

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

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

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