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

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

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

или

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

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

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

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

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

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

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

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

Я должен сказать, если вы собираетесь ссылаться на эту область на странице ... например, page.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>

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

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

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

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

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

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

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

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

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

window.foo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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