Должен ли я создавать анкеры HTML с "именем" или "id"?

Ответ 1

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

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

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

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

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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

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

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

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

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

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

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

window.foo

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

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

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

Ответ 8

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

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

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

Ответ 9

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

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

Ответ 10

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

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

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

Ответ 11

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

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

Ответ 12

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

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

Ответ 13

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

Ответ 14

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

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