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

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

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

или

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

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

718
27 янв. '09 в 21:57
источник поделиться
14 ответов

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

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

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

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

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

571
27 янв. '09 в 22:10
источник

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

170
27 янв. '09 в 22:37
источник

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

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

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

48
27 янв. '09 в 22:03
источник

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

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

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

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

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

  • "Имена и идентификаторы находятся в одном пространстве имен..." - Два атрибута с одним и тем же пространством имен просто сумасшедшие. Позвольте просто сказать, что устарели уже.
  • "Якоря элементов без атрибута href" - И все же, природа элемента (гиперссылки или нет) определяется наличием атрибута?! Двойной сумасшедший. Здравый смысл говорит, чтобы избежать этого вообще.
  • Если вы когда-либо создавали привязку без псевдокласса, стиль применяется к каждому. В CSS3 вы можете обойти это с помощью селекторов атрибутов (или одинакового стиля для каждого псевдокласса), но все же это обходное решение. Это обычно не возникает, потому что вы выбираете цвета для псевдокласса, а подчеркивание присутствует по умолчанию, это имеет смысл только удалить, что делает его таким же, как и другой текст. Но вы когда-либо решили сделать ваши ссылки смелыми, это вызовет проблемы.
  • Netscape 4 может не поддерживать функцию id, но все же неизвестный атрибут не вызовет никаких проблем. Это то, что называется совместимостью для меня.
26
25 марта '13 в 17:46
источник
<h1 id="foo">Foo Title</h1>

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

15
25 июня '09 в 22:49
источник

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

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

Просто создал JS global:

window.foo

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

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

<h1 name="foo">Foo Title</h1>
9
17 февр. '15 в 21:23
источник

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

9
27 янв. '09 в 22:02
источник

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

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

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

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

<div id="[serial number]" class="topic_wrapper">
3
13 июня '12 в 5:10
источник

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

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

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

2
31 дек. '12 в 7:23
источник

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

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

1
25 июня '17 в 20:45
источник

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

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

1
27 янв. '09 в 22:04
источник

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

0
20 июня '13 в 10:36
источник

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

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

-2
27 янв. '09 в 21:59
источник

Посмотрите другие вопросы по меткам или Задайте вопрос