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

153

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

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

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

Zacqary
источник
1
Возможен ли дубликат Безопасного тега привязки без атрибута href?
обрабатывать

Ответы:

245

Элемент <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.

zzzzBov
источник
1
@Zacqary, [role="button"]ничего конкретного не делает, вам все равно нужно прислушиваться к событию click (но вы все равно сделаете это, чтобы создать кнопку JS). Он предназначен для вспомогательной навигации (он же программы чтения с экрана), чтобы программа чтения с экрана знала, что элемент должен представлять собой кнопку, а не его исходное семантическое значение. Добавление [tabindex]добавляет элемент в порядок табуляции. В особых случаях вам может не понадобиться / не нужна кнопка для навигации в порядке табуляции, поэтому это необязательный атрибут. Элементы, которые уже являются кнопками, не нужны, так [role="button"]как это избыточно.
zzzzBov
Допустим ли HTML иметь тег привязки без href и без имени? В нашем приложении у нас есть некоторые ссылки для удаления, которые отключены (следовательно, нет атрибута href), но все же отображаются для пользователя.
Джошуа Мухайм,
1
@JoshuaMuheim, я надеюсь, вы не возражаете, но я разместил ваш вопрос в качестве отдельного вопроса .
zzzzBov
Просто хотел добавить примечание, что если вы используете это для создания «кнопок» для действий javascript ... полное удаление атрибута href также приведет к тому, что Chrome (и, возможно, другие браузеры) перестанет менять курсор при наведении курсора мыши. Очевидно, что это легко добавить обратно с помощью CSS - но только на голову.
Мир
@Mir, если вы не собираетесь использовать [href], вероятно, вы должны использовать <span>для кнопки.
zzzzBov
45

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

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

<a href="javascript:void(0);">something</a>
Свати
источник
3
Должно быть на самом делеjavascript:undefined
rybo111
2
@ rybo111 ты прав, но я все еще предпочитаю void (0); в основном потому, что выглядит лучше. Я не люблю своих клиентов , чтобы видеть вещи , как «не определено» ;-)
Алекс
9
<a href="javascript:;">text</a>?
диневала
javascript:;используется для разрушения таких вещей, как эффекты ролловера и даже анимации в GIF в IE6. А для операций со ссылками существуют специальные элементы HTML, такие как button. В то же время такие вещи, как ссылки AJAX, могут использовать их hrefдля резервных действий в случае сбоя JS.
Илья Стрельцын
14

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

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

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

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

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

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

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

Тамаш Болвари
источник
Речь идет не столько о «семантике пограничного случая», сколько о доступности, то есть о том, что люди с ограниченными возможностями могут использовать и понимать содержимое веб-сайта
neiya
3

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

Vedant
источник
2
Вы должны использовать кнопку в этом случае. Это более уместно как с точки зрения семантики, так и с точки зрения доступности. Якоря должны вас куда-то отвести, а не совершать действия. Кроме того, почему ты прячешь весь якорь aria-hidden? Иконка, может быть, но пользователи программы чтения с экрана не должны иметь ничего плохого.
Ишервуд