Должен ли я создавать HTML-якоря с именем или идентификатором?
https://stackoverflow.com/questions/484719
-
20-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Когда кто-то хочет сослаться на какую-то часть веб-страницы с помощью «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-адрес и пусть fragid будет компонентом <fragment> URL-адреса.
- Если fragid — пустая строка, то указанная часть документа — это верхняя часть документа.
- Если в DOM есть элемент, идентификатор которого точно равен fragid, то первым таким элементом в древовидном порядке является указанная часть документа;остановите алгоритм здесь.
- Если есть а элемент в DOM, имеющий атрибут name, значение которого в точности равно 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.
Я должен сказать, что если вы собираетесь ссылаться на эту область страницы...например, 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>
А Википедия работает для всех, поэтому я буду чувствовать себя в безопасности, придерживаясь этой формы.
Также не забывайте, что вы можете использовать это не только с интервалами, но и с элементами div или даже ячейками таблицы, и тогда у вас будет доступ к псевдоклассу :target элемента.Просто будьте осторожны, чтобы не изменить ширину, как в случае с жирным текстом, потому что это перемещает контент, что раздражает.
Именованные якоря – я голосую за то, чтобы избегать:
- «Имена и идентификаторы находятся в одном пространстве имен...» — Два атрибута с одним и тем же пространством имен — это просто безумие.Скажем так, уже устарел.
- «Привязывает элементы без атрибута href». Опять же, природа элемента (гиперссылка или нет) определяется наличием атрибута?!Вдвойне сумасшедший.Здравый смысл подсказывает, что этого вообще следует избегать.
- Если вы когда-либо создавали якорь без псевдокласса, стиль применяется к каждому из них.В CSS3 это можно обойти с помощью селекторов атрибутов (или одного и того же стиля для каждого псевдокласса), но все же это обходной путь.Обычно этого не происходит, потому что вы выбираете цвета для каждого псевдокласса, а подчеркивание, присутствующее по умолчанию, имеет смысл только удалить, что делает его таким же, как и другой текст.Но если вы решите выделить ссылки жирным шрифтом, это вызовет проблемы.
- Netscape 4 может не поддерживать функцию id, но неизвестный атрибут не вызовет никаких проблем.Для меня это называется совместимостью.
<h1 id="foo">Foo Title</h1>
это то, что следует использовать.Не используйте якорь, если вам не нужна ссылка.
Внимание для пользователей JavaScript: все идентификаторы становятся глобальными переменными в окне.
<h1 id="foo">Foo Title</h1>
Только что создал глобальный JS:
window.foo
Значение window.foo будет HTMLElement для h1.
Если вы не можете гарантировать все значения, используемые в id атрибуты безопасны, вы можете предпочесть придерживаться name:
<h1 name="foo">Foo Title</h1>
Метод ID не будет работать в старых браузерах, метод имени привязки будет устаревшим в новых версиях HTML...Я бы выбрал id.
Нет никакой смысловой разницы;тенденция в стандартах направлена на использование id скорее, чем name.Однако существуют различия, которые могут привести к предпочтению name в некоторых случаях.Спецификация HTML 4.01 предлагает следующие подсказки:
Использовать id или name?Авторам следует учитывать следующие вопросы при принятии решения об использовании id или name для имени якоря:
- Атрибут id может действовать не только как имя привязки (например, селектор таблицы стилей, идентификатор обработки и т. д.).
- Некоторые старые пользовательские агенты не поддерживают привязки, созданные с помощью атрибута id.
- Атрибут name позволяет использовать более богатые имена привязок (с сущностями).
У меня есть веб-страница, состоящая из нескольких вертикально расположенных контейнеров div, идентичных по формату и отличающихся только серийным номером.Я хотел скрыть привязку имени вверху каждого элемента div, поэтому наиболее экономичным решением оказалось включение привязки в качестве идентификатора в открывающий тег div, т. е.
<div id="[serial number]" class="topic_wrapper">
Просто наблюдение по поводу разметки. Форма разметки в предыдущих версиях HTML обеспечивала точку привязки.Формы разметки в HTML5 с использованием атрибута id, хотя в основном эквивалентны, требуют идентификации элемента, почти все из которых обычно содержат контент.
Например, можно использовать пустой интервал или div, но такое использование выглядит и пахнет уродливо.
Одна из идей — использовать для этой цели элемент wbr.WBR имеет пустую модель контента и просто объявляет, что возможен разрыв строки;это по-прежнему несколько необоснованное использование тега разметки, но в гораздо меньшей степени, чем неоправданное разделение документа или пустые текстовые фрагменты.
Во втором примере рассматриваемому элементу присваивается уникальный идентификатор.Затем этим элементом можно манипулировать или получать к нему доступ с помощью DHTML.
С другой стороны, первый из них устанавливает именованное место в документе, аналогично закладке.Прикрепленный к «якорю», это имеет смысл.
В HTML 5 id="" Атрибут определяет уникальный идентификатор элемента, который также является привязкой для ссылки на фрагмент.В предыдущих стандартах HTML name="" атрибут <a> элемент определяет привязку для ссылки на фрагмент.Я рекомендую что-то вроде:<a name="foo" id="foo"></a><h1>Foo Title</h1>
Поскольку поддержка id="" Атрибут немного нестабильный (хотя последние версии всех основных браузеров его поддерживают, выпускам, которые его не поддерживают, не более нескольких лет). [И лучше ничего не ломать, если нет веской причины ]).Он совместим и не стилизирует все, что находится в связанном элементе, поскольку закрывающий </a> все еще находится за пределами элемента, но он по-прежнему действителен во всех текущих стандартах.
Будьте уверены, что name="" и id="" атрибуты <a> элемент одинаковый.
Как насчет использования атрибута name для старых браузеров и атрибута id для новых браузеров.Оба варианта будут использоваться, а резервный метод будет реализован по умолчанию!!!
Вся концепция «именованной привязки» по определению использует атрибут name.Вам следует просто использовать имя, но атрибут ID может быть полезен в некоторых ситуациях, связанных с JavaScript.
Как и в комментариях, вы всегда можете использовать оба варианта, чтобы подстраховаться.
