Когда вы хотите обратиться к какой-либо части веб-страницы с помощью метода "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) необходимо выполнить следующую модель обработки, чтобы определить, что указано в указанной части документа.
- Разберите URL-адрес и пусть хрупким будет < фрагмент > компонент URL-адреса.
- Если fragid является пустой строкой, указанная часть документа является верхней частью документа.
- Если в DOM есть элемент, у которого есть идентификатор, точно равный fragid, то первым таким элементом в древовидном порядке является указанная часть документа; остановите алгоритм здесь.
- Если в DOM есть элемент, у которого есть атрибут имени, значение которого точно равно fragid, то первым таким элементом в древовидном порядке является указанная часть документа; остановите алгоритм здесь.
- В противном случае указанная часть документа отсутствует.
Итак, он будет искать 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.
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.
Я должен сказать, если вы собираетесь связываться с этой областью на странице... например, 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>
И Wikipedia работает для всех, поэтому я буду чувствовать себя в безопасности с этой формой.
Также не забывайте, что вы можете использовать это не только с пробелами, но и с div или даже ячейками таблицы, а затем у вас есть доступ к псевдо-классу: target для элемента. Просто следите за тем, чтобы не изменять ширину, например, жирным шрифтом, из-за чего перемещается содержимое вокруг, что вызывает беспокойство.
Именованные якоря - мой голос должен избегать:
a {color:red}
он раскрасит как ваши <a href> ссылки, так и ваши <a name> фрагменты. Вы можете обойти это с помощью псевдоклассов a:link {color:red]}
или селекторов атрибутов a:not([href]) {color:red;}
<h1 id="foo">Foo Title</h1>
- это то, что нужно использовать. Не используйте привязку, если вы не хотите ссылку.
Настраивается для пользователей JavaScript: все идентификаторы становятся глобальными переменными в окне.
<h1 id="foo">Foo Title</h1>
Просто создал JS global:
window.foo
Значение window.foo
будет HTMLElement
для h1
.
Если вы не можете гарантировать, что все значения, используемые в атрибутах id
, являются безопасными, вы можете предпочесть придерживаться name
:
<h1 name="foo">Foo Title</h1>
window
. Например, <div id="open"></div>
не перезапишет функцию window.open
.
Метод ID не будет работать в старых браузерах, метод имени привязки будет устаревать в новых версиях HTML... Я бы пошел с id.
Там нет семантической разницы; тенденция в стандартах направлена на использование id
, а не name
. Однако существуют различия, которые могут привести к тому, что в некоторых случаях предпочтение отдается name
. Спецификация HTML 4.01 предлагает следующие подсказки:
Использовать id
или name
? Авторы должны учитывать следующие проблемы при выборе id
или name
для имени привязки:
У меня есть веб-страница, состоящая из нескольких вертикально уложенных контейнеров div, идентичных в формате и отличающихся только серийным номером. Я хотел скрыть якорь имен в верхней части каждого div, поэтому наиболее экономичным решением оказалось включение якоря в качестве идентификатора в теге открытия div, т.е.
<div id="[serial number]" class="topic_wrapper">
Просто наблюдение за разметкой. Форма разметки в предыдущих версиях HTML предоставила опорную точку. Разметка формируется в HTML5 с использованием атрибута id, в то время как в основном эквивалентна, требуется идентифицировать элемент, почти все из которых обычно должны содержать контент.
Например, можно использовать пустой диапазон или div, но это использование выглядит и пахнет вырожденным.
Одна мысль состоит в том, чтобы использовать элемент wbr для этой цели. Wbr имеет пустую модель контента и просто объявляет, что возможен разрыв строки; это по-прежнему немного безвозмездное использование тега разметки, но гораздо меньше, чем бесплатное разделение документов или пустое текстовое пространство.
wbr
: w3.org/TR/html-markup/wbr.html Используйте <wbr id="foo" />
вместо <a name="foo"></a>
В html 5 атрибут id=""
определяет уникальный идентификатор для элемента, который также является якорем для ссылки на фрагмент. В предыдущих html-стандартах атрибут name=""
элемента <a>
определяет привязку для ссылки на фрагмент. Я рекомендую что-то вроде: <a name="foo" id="foo"></a><h1>Foo Title</h1>
Поскольку поддержка атрибута id=""
является немного пятнистой (хотя последние версии всех основных браузеров поддерживают ее, выпусков, которые не являются не более чем несколькими годами [И лучше не сломать что-либо, если нет веских оснований]). Он совместим, и он не создает ничего в элементе link'd, для закрытия </a> все еще находится вне элемента, но он все еще действует во всех существующих стандартах.
Убедитесь, что атрибуты name=""
и id=""
элемента <a>
совпадают.
name
в теге привязки, который был необходим; размещение атрибутов в hN
или span
не работает.
Второй пример присваивает уникальный идентификатор рассматриваемому элементу. Затем этот элемент можно манипулировать или получить доступ с помощью DHTML.
Первый, с другой стороны, устанавливает именованное местоположение в документе, похожее на закладку. Прикрепленный к "якорю", это имеет смысл.
Как использовать атрибут имени для старых браузеров и атрибут id для новых браузеров. Оба варианта будут использованы, и метод возврата будет реализован по умолчанию!!!
Вся концепция "named anchor" использует атрибут name по определению. Вы должны просто придерживаться имени, но атрибут идентификатора может быть удобен для некоторых ситуаций javascript.
Как и в комментариях, вы всегда можете использовать оба для хеджирования своих ставок.
http://example.com#foo
(поэтому без / before #)http://example.com#foo
иhttp://example.com/#foo
эквивалентны, как определено в одном из RFC для URI.