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

753

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

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

или

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

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

  • 2
    Ссылка должна быть на самом деле http://example.com#foo (поэтому без / before #)
  • 64
    На самом деле http://example.com#foo и http://example.com/#foo эквивалентны, как определено в одном из RFC для URI.
Теги:
hyperlink
fragment-identifier

14 ответов

571
Лучший ответ

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

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

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

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

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

  • 71
    Там нет подразумеваемой связи между этим алгоритмом и действительностью. <a name> недопустимо в HTML5 в том виде, в котором оно написано в данный момент.
  • 12
    На самом деле это не относится к другим «именованным элементам». Что касается атрибутов name, то это относится только к <a name>. Однако этот атрибут не может быть использован авторами. Это просто должно быть выполнено пользовательскими агентами для старых HTML-страниц.
Показать ещё 9 комментариев
170

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

  • 4
    +1 за разговор о поддержке браузера. Является ли NS4 единственным, не поддерживающим url # id => element.id?
  • 13
    @Hashbrown Не удалось найти ответ, поэтому я провел тестирование. Я обнаружил, что даже в очень старых браузерах id обрабатываются так же, как якоря name с точки зрения фрагментов URL и совместимости селектора CSS :target . Протестировано: 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.
Показать ещё 5 комментариев
50

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

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

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

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

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

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

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

Также не забывайте, что вы можете использовать это не только с пробелами, но и с 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;}
  • 0
    Вы правы, но для меня пуля 3 говорит именно это. Может быть, мой английский, хотя ...
Показать ещё 5 комментариев
15
<h1 id="foo">Foo Title</h1>

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

  • 0
    не работает для Chrome andriod
  • 0
    Идентичен ответу Тима Найта, опубликованному за полгода до этого. -1
9

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

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

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

window.foo

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

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

<h1 name="foo">Foo Title</h1>
  • 11
    Хорошей новостью является то, что вы не можете переписать функции, определенные в window . Например, <div id="open"></div> не перезапишет функцию window.open .
9

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

  • 2
    Есть ли у вас источник этих претензий? Не пойми меня неправильно; Мне просто вообще интересно.
  • 4
    w3.org/TR/2008/WD-html5-diff-20080610/#absent-attributes
Показать ещё 6 комментариев
8

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

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

  • Атрибут id может действовать как больше, чем просто имя привязки (например, селектор таблицы стилей, идентификатор обработки и т.д.).
  • Некоторые старые пользовательские агенты не поддерживают привязки, созданные с атрибутом id.
  • Атрибут name позволяет использовать более богатые имена привязок (с сущностями).
  • 14
    Для ясности, когда они говорят «старые пользовательские агенты», они имеют в виду ДЕЙСТВИТЕЛЬНО старых пользовательских агентов. Я бы не беспокоился об этом.
  • 1
    HTML5 также позволяет использовать «богатые» идентификаторы. Есть ли у кого-нибудь версии браузеров с долей рынка более 0,1%, которые не могут обрабатывать фрагменты, привязанные к id? - Или динозавр Netscape 4.7 на самом деле самый распространенный?
Показать ещё 6 комментариев
3

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

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

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

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

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

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

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

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

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

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

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

0

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

-3

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню