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



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



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


или



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


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

676   14  

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 and 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" - еще раз, природа элемента (гиперссылка или нет) определяется наличием атрибута?! Двойное безумие. Здравый смысл говорит, чтобы избежать этого вообще.
  • если вы когда-нибудь стиль якорь без псевдокласса стиль применяется к каждому из них. В CSS3 вы можете обойти это с помощью селекторов атрибутов (или того же стиля для каждого псевдокласса), но все же это обходной путь. Обычно это не происходит, потому что вы выбираете цвета для псевдокласса, а подчеркивание присутствует по умолчанию, имеет смысл только удалить, что делает его таким же, как и другой текст. Но если вы когда-нибудь решите сделать свои ссылки жирными, это вызовет проблемы.
  • Netscape 4 может не поддерживать функцию id, но тем не менее неизвестный атрибут не вызовет никаких проблем. Вот что для меня называется совместимостью.
<h1 id="foo">Foo Title</h1>

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

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

нет никакой семантической разницы; тенденция в стандартах направлена на использование 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, т. е.

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

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

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

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

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

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

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

в html 5, то id="" атрибут определяет уникальный идентификатор для элемента, который также является привязкой для фрагментной ссылки. В предыдущих стандартах html,

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

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

Comments

    Ничего не найдено.