Действительно использовать <a>(якорный тэг) без атрибута href?

Я использую Twitter Bootstrap для сборки сайта, и многие его функции зависят от того, как обернуть вещи в <a>, даже если они просто будут запускать Javascript. У меня были проблемы с тактикой href="#", которую рекомендует документация Bootstrap, поэтому я пытался найти другое решение.

Но потом я попробовал просто удалить атрибут href вообще. Я использовал <a class='bunch of classes' data-whatever='data'>, а Javascript обрабатывал все остальное. И это работает.

Но что-то говорит мне, что я не должен этого делать. Правильно? Я имею в виду, что технически <a> должен быть ссылкой на что-то, но я не совсем уверен, почему это проблема. Или это?

Ответы

Ответ 1

Элемент <a> nchor - это просто привязка к некоторому контенту или к нему. Первоначально в спецификации HTML допускались именованные якоря (<a name="foo">) и связанные привязки (<a href="#foo">).

Именованный формат привязки реже используется, так как теперь идентификатор фрагмента используется для указания атрибута [id] (хотя для обратной совместимости вы можете указать атрибуты [name]). Элемент <a> без атрибута [href] остается в силе.

Что касается семантики и стиля, элемент <a> не является ссылкой (:link), если у него нет атрибута [href]. Побочным эффектом этого является то, что элемент <a> без [href] по умолчанию не будет находиться в порядке табуляции.

Реальный вопрос заключается в том, является ли элемент <a> самостоятельно подходящим представлением a <button>. На семантическом уровне существует четкое различие между a link и a button.

Кнопка - это то, что при нажатии вызывает действие.

Ссылка - это кнопка, которая вызывает изменение навигации в текущем документе. Перемещение, которое происходит, может перемещаться внутри документа в случае идентификаторов фрагментов (#foo) или перехода к новому документу в случае URL-адресов (/bar).

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

Если вас беспокоит семантика и доступность использования элемента <a> (или <span> или <div>) в качестве кнопки, вы должны добавить следующие атрибуты:

<a role="button" tabindex="0" ...>...</a>

Кнопка кнопка сообщает пользователю, что конкретный элемент рассматривается как кнопка в качестве переопределения для любой семантики, которую мог иметь базовый элемент.

Для элементов <span> и <div> вы можете захотеть добавить слушателей ключевых слов JavaScript для Space или Enter для запуска события click. Элементы <a href> и <button> делают это по умолчанию, но элементы без кнопки не работают. Иногда имеет смысл связывать триггер click с другим ключом. Например, кнопка "help" в веб-приложении может быть привязана к F1.

Ответ 3

Да, допустимо использовать тег привязки без атрибута href.

Если элемент a не имеет атрибута href, тогда этот элемент представляет собой заполнитель, где ссылка могла бы быть размещена иным образом, если она были релевантными, состоящими только из содержимого элемента.

Да, вы можете использовать class и другие атрибуты , но вы не можете использовать target, download, rel, hreflang и type.

Атрибуты target, download, rel, hreflang и type должны быть опущен, если атрибут href отсутствует.

Что касается "Должен ли я?" часть, см. первую цитату: "где ссылка могла бы быть размещена, если бы она была релевантной". Поэтому я бы спросил: "Если бы у меня не было JavaScript, я бы использовал этот тег в качестве ссылки?". Если да, то да, вы должны использовать <a> без href. Если нет, то я все равно буду использовать его, потому что для меня важнее производительность, чем семантика краевого случая, но это только мое личное мнение.

Кроме того, вы должны следить за разные поведение и стиль (например, нет подчеркивания, курсора указателя, а не :link).

Источник: Рекомендация W3C HTML5

Ответ 4

Это действительно. Вы можете, например, использовать его для отображения модалов (или похожих вещей, которые отвечают на атрибуты data-toggle и data-target).

Что-то вроде:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

Здесь я использую шрифт-удивительный значок, который лучше, чем тег a, а не button, чтобы показать модальный. Кроме того, установка role="button" изменяет указатель на тип действия. Без href или role="button" указатель курсора не изменяется.