Безопасен ли тег привязки без атрибута href?

232

Можно ли использовать тег привязки, не включая hrefатрибут, и вместо этого использовать обработчик событий щелчка JavaScript? Так что я бы опустил hrefполностью, даже не пусто ( href="").

Джон
источник
1
Событие onclick все еще срабатывает, хотя? Я хочу использовать теги привязки вместо span / div, потому что это единственный разумный тег, поддерживающий CSS: hover в IE
Джон
3
@Martin Якоря могут быть доступны и активированы с помощью клавиатуры. Обычные элементы SPAN не могут. Смотрите здесь: jsfiddle.net/simevidas/4DTxv/2
Шиме Видас
2
В HTML5 якоря без атрибута href являются заполнителями-гиперссылками: dev.w3.org/html5/markup/a.html
Игнасио Лаго,
1
Вы уверены, что не хотите кнопку вместо этого? Это будет означать, что вкладки и т. Д. Работают, и вы можете настроить ваши кнопки так, чтобы они выглядели как ссылки, если это необходимо. По общему признанию я не знаю о наведении в IE.
robbie_c

Ответы:

217

В HTML5 использование aэлемента без hrefатрибута допустимо. Он считается «гиперссылкой-заполнителем».

Пример:

<a>previous</a>

Найдите «гиперссылку-заполнитель» на странице ссылок тега привязки w3c: https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element .

И это также упоминается в вики здесь: https://www.w3.org/wiki/Elements/a

Ссылка-заполнитель предназначена для случаев, когда вы хотите использовать элемент привязки, но нигде не перемещать его. Это удобно для разметки текущей страницы в навигационном меню или в журнале. (Старый подход заключался в использовании тега span или тега привязки с классом с именем «active» или «current» для стилизации и JavaScript для отмены навигации.)

Ссылка-заполнитель также полезна в тех случаях, когда вы хотите динамически установить место назначения ссылки через JavaScript во время выполнения. Вы просто устанавливаете значение атрибута href, и тег привязки становится активным.

Смотрите также:

dthrasher
источник
3
Каково определение "ссылки-заполнителя"?
Гюм Фокс
14
Обратите внимание, что без hrefэтого cursor: pointerстиль не будет автоматически добавлен к элементу.
Люк
38

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

http://webdesignfan.com/yslow-tutorial-part-2-of-3-reducing-server-calls/

Мой совет - используйте <a href="#"> </a>

Если вы используете JQuery, не забудьте также использовать:

.click(function(event){
    event.preventDefault();
    // Click code here...
});
Гуннар Хоффман
источник
7
Я не могу использовать href = "#", потому что я использую закладку ajax, которая включает изменение хеша, что я могу сделать?
Джон
5
Вместо использования javascript: void (0); внутри я использую javascript :; короче написать.
Союзник
16
Штраф за производительность применяется только в том случае, если вы фактически указали пустой атрибут href. Вопрос гласит, что атрибут href вообще отсутствует.
Пит Б
18
На самом деле, согласно статье (и это имеет смысл), потенциальное снижение производительности применимо только к пустым атрибутам src . Он ничего не говорит о производительности в отношении пустых атрибутов href.
bergie3000
1
Привет @Gunnar, ссылка, кажется, больше не существует. У вас есть еще одна ссылка на претензию?
user31782
25

Краткий ответ: Нет.

Длинный ответ:

Во-первых, без атрибута href это не будет ссылка. Если это не ссылка, то она не будет доступна с клавиатуры (или переключателя дыхания, или другого устройства ввода, не основанного на указателе) (если вы не используете функции HTML 5, tabindexкоторые не поддерживаются повсеместно). Очень редко уместно, чтобы элемент управления не имел доступа к клавиатуре.

Во-вторых. У вас должна быть альтернатива для случаев, когда JavaScript не запускается (из-за медленной загрузки с сервера, из-за разрыва соединения с Интернетом (например, из-за мобильного сигнала в движущемся поезде), JS выключен и т. Д. И т. Д.).

Воспользоваться прогрессивного улучшения с помощью ненавязчивых JS.

Quentin
источник
Проблема в том, что мне нужно что-то, к чему я могу прикрепить событие click с помощью метода jQuery «click», который также выделяется и подчеркивается как ссылка, когда курсор мыши на него надвигается. Что еще, кроме тега привязки href-less, может сделать это без CSS? (то есть, как есть, без добавления этого базового взаимодействия вручную, сохраняя при этом простоту назначения функции прямого щелчка через jQuery).
Трийнко
@Triynko - используйте ссылку, но делайте это правильно. Смотрите последнюю строку ответа.
Квентин
5
Tabindex для тегов 'a' действителен с HTML4 (по крайней мере) w3schools.com/tags/att_global_tabindex.asp
technoTarek
@technoTarek - Да, но hrefбыло обязательным (если только это не был именованный якорь, в этом случае tabindex не имел смысла). Использование tabindexдля добавления не сфокусированных элементов в порядок вкладок является новым нововведением в HTML 5.
Квентин
4
Это просто неправильно. Я не могу сказать, ссылались ли вы на более старую спецификацию для HTML в то время, но в соответствии со спецификацией HTML5 действительно вполне допустимо иметь aтег без hrefатрибута.
Майкл
23

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

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

вместо #, если вы не хотите использовать атрибут

Rasive
источник
1
Мне нужен тег <a>, который ведет себя как ссылка во всех, кроме функции. Это помогло мне.
Jad S
13

Этот тег можно использовать без атрибута href. Вопреки многим из ответов здесь, на самом деле есть стандартные причины для создания якоря, когда нет href. Семантически, «а» означает якорь или ссылку. Если вы используете это для чего-то, что следует этому значению, тогда у вас все хорошо.

Одно из стандартных применений тега без href - создание именованных ссылок. Это позволяет вам использовать якорь с name = blah, а позже вы можете создать якорь с href = # blah для ссылки на именованный раздел текущей страницы. Тем не менее, это устарело, потому что вы также можете использовать идентификаторы таким же образом. В качестве примера вы можете использовать тег заголовка с id = header, а позже вы можете использовать привязку, указывающую на заголовок href = #.

Однако я не советую использовать свойство name. Только для обеспечения одного варианта использования, где вам не нужен href, и, следовательно, обоснование, почему это не требуется.

monokrome
источник
2
Я думаю, что вопрос пытался задать и к чему обращаются другие ответы, является ли безопасным пропуск hrefатрибута для <a>элемента , который используется в качестве интерактивного элемента (то есть ссылки). Как вы упоминаете, без hrefатрибута это довольно просто ... не ссылка, а просто якорь, что совсем другое.
BoltClock
1
Да, но - просто чтобы подчеркнуть - тег <a> все еще действителен в этих случаях использования.
монокром
9

С точки зрения доступности <a>без href невозможно табулировать, все ссылки должны быть табулируемыми, поэтому добавьте tabindex = '0', если у вас нет href.

user3862605
источник
1
Или используйте кнопку, если она собирается выполнить действие на странице вместо перенаправления.
SimonDever
8

<a>Тег без «HREF» может быть удобно при использовании меню многоуровневого и вам нужно расширить на следующий уровень , но не хотите , чтобы ярлык меню , чтобы быть активным звеном. У меня никогда не было проблем с этим.

Джон
источник
1
Вы пытались получить доступ к этому меню с клавиатуры?
Aij
Я только что узнал, что в IE, если вы наводите курсор на несколько ссылок, и одна из них является привязкой без href, небольшое всплывающее окно с URL-адресом ниже остается там, показывая предыдущий URL-адрес, а не исчезая. Якорь не кликабелен, так что это не большая проблема, но мне достаточно вместо этого использовать div.
Андрей
1

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

<a href="#" onclick="yourcode();return false;">Link</a>

Вы можете заменить yourcode () своей собственной функцией или логикой, но не забудьте добавить return false; заявление в конце.

shashwat13
источник
Я использую Backbone.js с Backbone.Router и имею #для индексной страницы. Для некоторых из моих ссылок на панели навигации я не хочу запускать маршрут, по #которому происходит, если вы используете a href="#"его самостоятельно. Использование <a href="#" onclick="return false;"останавливает запуск маршрута, но событие click все еще всплывает в моем обработчике (который использует события DOM, подключенные через jQuery и Backbone.Radio). Спасибо @ shashwat13 :)
Дэвид Уильямсон