Я использовал Twitter Bootstrap для создания сайта, и большая часть его функциональности зависит от того, какие вещи <a>
нужно использовать, даже если они просто собираются выполнить Javascript. У меня были проблемы с href="#"
тактикой, которую рекомендует документация Bootstrap, поэтому я пытался найти другое решение.
Но затем я попытался удалить href
атрибут полностью. Я использую <a class='bunch of classes' data-whatever='data'>
, и Javascript обрабатывает все остальное. И это работает.
Все же что-то говорит мне, что я не должен этого делать. Правильно? Я имею в виду, технически <a>
это должна быть ссылка на что-то, но я не совсем уверен, почему это проблема. Либо это?
html
anchor
semantic-markup
htmlbutton
Zacqary
источник
источник
Ответы:
Элемент
<a>
nchor - это просто привязка к некоторому контенту или от него. Первоначально спецификация HTML допускала именованные anchors (<a name="foo">
) и связанные anchors (<a href="#foo">
).Именованный формат привязки используется реже, поскольку идентификатор фрагмента теперь используется для указания
[id]
атрибута (хотя для обратной совместимости вы все равно можете указывать[name]
атрибуты). Элемент без атрибута остается в силе .<a>
[href]
Что касается семантики и стиля,
<a>
элемент не является ссылкой (:link
), если у него нет[href]
атрибута. Побочным эффектом этого является то, что<a>
элемент без[href]
не будет в порядке табуляции по умолчанию.Реальный вопрос заключается в том, является ли
<a>
один элемент подходящим представлением a<button>
. На семантическом уровне существует четкое различие между alink
и abutton
.Кнопка - это то, что при нажатии вызывает действие.
Ссылка - это кнопка, которая вызывает изменение навигации в текущем документе. Происходящая навигация может перемещаться внутри документа в случае идентификаторов фрагментов (
#foo
) или перемещаться в новый документ в случае URL-адресов (/bar
).Поскольку ссылки представляют собой кнопки специального типа, их действия часто переопределяются для выполнения альтернативных функций. Продолжать использовать привязку в качестве кнопки - это нормально с точки зрения согласованности, хотя семантически это не совсем точно.
Если вас беспокоит семантика и доступность использования
<a>
элемента (или<span>
, или<div>
) в качестве кнопки, вам следует добавить следующие атрибуты:Кнопка роль сообщает пользователю о том , что конкретный элемент в настоящее время рассматривается как кнопки , как переопределение по какой - либо семантики , возможно, имели лежащий в основе элемента.
Для
<span>
и<div>
элементов, вы можете добавить ключевые JavaScript слушателей для Spaceили Enterдля запускаclick
события.<a href>
и<button>
элементы делают это по умолчанию, а не-кнопочные элементы - нет. Иногда имеет смысл привязатьclick
триггер к другой клавише. Например, кнопка «Справка» в веб-приложении может быть связана с F1.источник
[role="button"]
ничего конкретного не делает, вам все равно нужно прислушиваться к событию click (но вы все равно сделаете это, чтобы создать кнопку JS). Он предназначен для вспомогательной навигации (он же программы чтения с экрана), чтобы программа чтения с экрана знала, что элемент должен представлять собой кнопку, а не его исходное семантическое значение. Добавление[tabindex]
добавляет элемент в порядок табуляции. В особых случаях вам может не понадобиться / не нужна кнопка для навигации в порядке табуляции, поэтому это необязательный атрибут. Элементы, которые уже являются кнопками, не нужны, так[role="button"]
как это избыточно.[href]
, вероятно, вы должны использовать<span>
для кнопки.Я думаю, что вы можете найти свой ответ здесь: Безопасен ли тег привязки без атрибута href?
Также, если вы не хотите работать с href, вы можете использовать его следующим образом:
источник
javascript:undefined
<a href="javascript:;">text</a>
?javascript:;
используется для разрушения таких вещей, как эффекты ролловера и даже анимации в GIF в IE6. А для операций со ссылками существуют специальные элементы HTML, такие какbutton
. В то же время такие вещи, как ссылки AJAX, могут использовать ихhref
для резервных действий в случае сбоя JS.Да, допустимо использовать тег привязки без
href
атрибута.Да, вы можете использовать
class
и другие атрибуты, но вы не можете использоватьtarget
,download
,rel
,hreflang
, иtype
.Что касается части « Должен ли я? », См. Первую цитату: « где в противном случае могла бы быть размещена ссылка, если бы она была релевантной ». Поэтому я бы спросил: « Если бы у меня не было JavaScript, я бы использовал этот тег как ссылку? ». Если ответ да, тогда да, вы должны использовать
<a>
безhref
. Если нет, то я бы все равно использовал это, потому что производительность для меня важнее семантики пограничного случая, но это только мое личное мнение.Кроме того, вы должны следить за различным поведением и стилем (например, без подчеркивания, без курсора-указателя, не а
:link
).Источник: рекомендация W3C HTML5
источник
Это действительно. Вы можете, например, использовать его, чтобы показать модалы (или подобные вещи, которые отвечают
data-toggle
иdata-target
атрибуты).Что-то вроде:
Здесь я использую иконку font-awesome, которая лучше в качестве
a
тега, чем abutton
, чтобы показать модал. Кроме того, установкаrole="button"
изменяет указатель на тип действия. Без илиhref
илиrole="button"
указатель курсора не изменяется.источник
aria-hidden
? Иконка, может быть, но пользователи программы чтения с экрана не должны иметь ничего плохого.