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

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

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

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

Элемент <a>nchor - это просто привязка к некоторому контенту или от него. Первоначально спецификация HTML допускала именованные anchors ( <a name="foo">) и связанные anchors ( <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триггер к другой клавише. Например, кнопка «Справка» в веб-приложении может быть связана с F1.

Я думаю, что вы можете найти свой ответ здесь: Безопасен ли тег привязки без атрибута href?

Также, если вы не хотите работать с href, вы можете использовать его следующим образом:

<a href="javascript:void(0);">something</a>

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

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

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

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

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

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

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

Это действительно. Вы можете, например, использовать его, чтобы показать модалы (или подобные вещи, которые отвечают 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>

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