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


784

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

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

или

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

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


2
Ссылка на самом деле должна быть http://example.com#foo(поэтому без / перед #)
Дана

71
На самом деле, http://example.com#fooи http://example.com/#fooэквивалентны, как определено в одном из RFC на URI.
Оливер

Ответы:


617

Согласно спецификации 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элемент не имеет атрибута имени. Однако вышеприведенные правила все еще применяются к другим именованным элементам.


77
Там нет подразумеваемой связи между этим алгоритмом и действительностью. <a name> недопустимо в HTML5 в том виде, в котором оно написано в данный момент.
hsivonen

13
На самом деле это не относится к другим «именованным элементам». Что касается атрибутов name, то это относится только к <a name>. Однако этот атрибут не может быть использован авторами. Это просто должно быть выполнено пользовательскими агентами для старых HTML-страниц.
Анна

19
@RafaelSoares <h1 id="foo">Foo Title</h1>работает даже в IE6 и является частью спецификации HTML 4.01
апрель

4
Он будет искать не name = "foo", а <a name="foo">. Смотрите ссылку
Даниэль Херцог

3
В документе HTML5 с символами a name="foo"и a id="foo"(независимо от их порядка на странице) Chrome и Firefox будут переходить к id, но IE (тестирование в 11) и Edge будут переходить кname
Alvaro Montoro

183

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


6
+1 за разговор о поддержке браузера. NS4 единственный не поддерживает url # id => element.id?
Hashbrown

14
@Hashbrown Не удалось найти ответ, поэтому я провел тестирование. Я обнаружил, что даже очень старые браузеры рассматривают ids как nameякоря с точки зрения фрагментов URL и совместимости:target селектора CSS . Протестировано: Chrome 6, Firefox 1.5, IE6, Opera 8.02, Safari 3.1.2, Netscape 7.2, Lynx 2.24 и мобильные браузеры: Android 2.2, Chrome 26, Dolphin 9.3, Firefox 19, IE10, Safari 4 и Opera Mini 5.1.
Стивен М. Харрис

1
@ smhmic, я нашел один. Веб-браузер Off-By-One распознает привязки, определенные с помощью <a name="foo"/>, но не распознает привязки, определенные с помощью <sometag id = "foo">. OB1 последний раз обновлялся> 8 лет назад. Его автор гордится тем, что он «может быть самым маленьким и быстрым в мире веб-браузером с полной поддержкой HTML 3.2». Он заявляет о поддержке Win95 через XP, но работает нормально с 64-битной Win7. Итак, почему такой динозавр? Конечно, для тестирования, чтобы убедиться, что мои сайты не ломаются слишком сильно с настоящими античными браузерами. Также я тоже ношу OB1 на флешку. Это крошечный, автономный и невосприимчивый к инфекциям.
Дейв Бертон,

26
Читать это в 2016 году будет как .. Netscape 4?
ADTC

1
использование `<a name="something" id="something> </a> [ELEMENT TO SCROLL TO], вероятно, лучше всего потому, что оно совместимо, и оно не
стилизует

53

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

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

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


Не только это, но я боролся со странной ошибкой, когда показ: ни один материал не показывался в IE. Не имея представления о точке атаки, я бросил ее на валидатор, который пометил записи <a name="foo">, поэтому я изменил их - и теперь отображается сообщение: ни одна не работает нормально.
Лорен Печтел

Этого более чем достаточно, для эффекта не нужен тег привязки.
Уоллес Сидре

28

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

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

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

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

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

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

1
Предложите отредактировать пункт 3 из 4: Если вы когда-нибудь сделаете стиль, a {color:red}он раскрасит как ваши <a href> ссылки, так и ваши <a name> фрагменты. Вы можете обойти это с помощью псевдо-классов a:link {color:red]}или селекторов атрибутовa:not([href]) {color:red;}
Боб Стейн

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

Наконец, я понял вашу точку зрения: «Если вы когда-нибудь создадите стиль якоря без псевдокласса, стиль будет применим к каждому». Неоднозначно: вы можете подумать «каждый псевдокласс». Правильно. Но я думал о «каждом случае» использования якоря, что означает именованный и href-ed. Уточнено. :) Не нужно редактировать после вашего комментария, но я могу, если вы настаиваете. Но и с цветами это все равно не произойдет, так как вы обычно намерены оставить их разными, но все равно с шрифтом-весом ...
Золтан Морваи,

понравилось читать ваши комментарии @ ZoltánMorvai. "двойной сумасшедший" и "netscape 4" doubleplusgood.
Рэнди Л

1
Два атрибута с одним и тем же пространством имен - это безумие - не совсем. При работе с пользовательским контентом очень полезно иметь возможность указывать что-либо как ссылку фрагмента <a name="heading1"></a> ... document.html#heading1без установки идентификатора, поскольку идентификатор может конфликтовать с другим идентификатором на странице. Жаль, что они не поместили nameатрибут в HTML5.
Jez

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

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


Идентичен ответу Тима Найта, опубликованному за полгода до этого. -1
Люк

14

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

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

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

window.foo

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

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

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

12
Хорошей новостью является то, что вы не можете перезаписать функции, определенные в window. Например, <div id="open"></div>не будет перезаписывать функцию window.open.
Flimm

9

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

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

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

14
Чтобы было ясно, когда они говорят «старые пользовательские агенты», они имеют в виду ДЕЙСТВИТЕЛЬНО старые пользовательские агенты. Я бы не беспокоился об этом.
Эли

1
HTML5 также допускает «богатые» идентификаторы. Есть ли у кого-нибудь версии браузеров с долей рынка более 0,1%, которые не могут обрабатывать фрагменты, привязанные к id? - Или динозавр Netscape 4.7 на самом деле самый распространенный?
Роберт Симер

7
FWIW, я не мог заставить idработать якоря в Safari для iOS 5, так что не только браузеры были «действительно старыми» в '09. Мне пришлось добавить names, чтобы мой сайт работал должным образом на iPad. Возможно, это уже исправлено, у меня нет устройств iOS 6 для проверки.
Даниэль Санер

@DanielSaner действительно? так что en.wikipedia.org/wiki/IPad#Applications не работает на вашем iPad?
Апрельон

1
@DanielSaner Я использовал симуляторы для тестирования Mobile Safari 5.02 и 5.1 и Android Browser 2.2 и 2.3, и idякоря, кажется, работают универсально. Если этот простой пример не работает на вашем мобильном телефоне, я бы проверил настройки доступности устройства. (На мобильном сайте @deathApril в Википедии есть Javascript, который эффективно игнорирует фрагмент URL.)
Стивен М. Харрис,

9

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


2
У вас есть источник для этих претензий? Не пойми меня неправильно; Мне просто вообще интересно.
Хенрик Пол

11
Это не проливает свет на «не будет работать в старых браузерах». - Какие это браузеры, кроме Netscape 4 ??
Роберт Симер

3
Я пытался использовать идентификатор на div, и он работает даже в IE 7. Не могу проверить в IE 6, хотя ... но кто использует IE 6 в настоящее время ...
Gilly

@deathApril в некоторых случаях (зависит от HASLAYOUT) глючит.
Кну

@RobertSiemer работает почти повсеместно - см. Мой комментарий под этим ответом .
Стивен М. Харрис

3

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

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

2

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

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


2

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

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

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


Неплохо подмечено. Больше информации на wbr: w3.org/TR/html-markup/wbr.html Используйте, <wbr id="foo" />а не<a name="foo"></a>
Луки

2

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

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


2
Не все, что использует HTML, является браузером. Я использую библиотеку Java, которая отображает информацию в окне, используя HTML. Это единственный метод, который работал. Это nameатрибут в теге привязки, который был необходим; размещение атрибутов на hNили spanне работает.
Марс

1

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


-3

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

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


При использовании обоих идентификаторы являются уникальными? например, могу ли я использовать ту же строку, что и идентификатор и имя?
Хенрик Пол

Вы можете, но некоторые люди думают, что это плохая практика.
Алекс Форт

9
Согласно спецификации HTML, если оба присутствуют, имя и идентификатор должны быть идентичны. В нем также говорится, что имена и идентификаторы находятся в одном пространстве имен. Служба проверки HTML не проверяет их, и я сомневаюсь, что браузеры заботятся об этом, но они все равно кажутся хорошими рекомендациями.
erickson

3
Реальность переопределена! <имя ... было плохо с самого начала, а CSS-стилизация ссылок делает его еще хуже.
Роберт Симер
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.