Что использовать вместо href="#"?

Question

[Владимир Родкин]

Частенько элементы управления верстаются с помощью HTML тэга a.

Это дает несколько преимуществ:

• если JavaScript отключен, то сработает переход по ссылке, если она задана
• Работает навигация по контролам с помощью клавиши Tab
• Работает событие click по нажатию на Enter, когда ссылка в фокусе

Минусы:

• Постоянно добавлять preventDefault
• При наведении на такую ссылку браузер внизу показывает адрес, даже если он не указан

Вот накидал небольшой тест: jsfiddle.net/VovanR/omt6am8z

Чтобы решить вопрос навигации и показа адреса ссылки, можно заменить тэг на span с атрибутом tabindex="0". Но событие click по нажатию на Enter так и не заработает. Пойдем дальше и заменим тэг на button. Теперь все почти идеально. За исключением того, что этот тэг сложнее всего стилизовать, особенно если используются глобальные стили.

Какие есть лучшие практики?

Comments

[aen]

Серебряной пули нет. Выьирайте меньшее зло. В моём случае это span с tabindex.

[Александр Кит]

> Пойдем дальше и заменим тэг на button. Теперь все почти идеально. За исключением того, что этот тэг сложнее всего стилизовать, особенно если используются глобальные стили.

А скажите, какие сложности возникают при стилизации `button`? Если лишь в сбрасывании дэфолтных стилей? Но разве это проблема?

[Владимир Родкин]

tenbits: Да, приходится много всего сбрасывать, если верстальщик наоформлял button, button:hover, button:after, button:focus и так далее со множеством вариаций. Многие еще все пишут стили по сетектору тэга, а не по классам.

Answer 1

[Владимир Родкин]

Написал небольшую статью, по которой можно выбрать что использовать, а от чего лучше отказаться. Как не использовать a(href="#")

Answer 2

[SerzN1]

Можно убрать атрибут ссылки и делов то. Кто мешает написать я кнопка. А вообще это бред. Не нужно менять семантику на хитрожопые штуки непонятного содержания. Ссылка должна оставаться ссылкой, если это пустой элемент управления то просто взять span.

Comments

[Владимир Родкин]

Ссылка без атрибута ничем не отличается от `span`, поэтому я не рассматриваю такой вариант.
Я пишу о том, что часто используют именно `a(href="#")` для того, чтобы быстро и просто получить такие фичи, как навигация по контролам клавишей Tab, а также вызов события `click`, нажатием на `Enter`, если наш контрол в фокусе.
Тэг `a` выбирает огромное количество разработчиков. Я создал этот вопрос чтобы собрать лучшие практики не использовать данный тэг, если не нужна фича перехода по ссылке при отключенном JavaScript.

Answer 3

[Tashiro]

a href="javascript:void(0)" ?

Comments

[Владимир Родкин]

Добавил в тесты. Это некрасивый хак, который можно использовать только для букмарок. В `HTML` не должно быть подобного кода.

[Tashiro]

Владимир Родкин: ну почему "некрасивый" как раз таки "красивый" и без js будет работать и все остальное попадает под описание, а точто в "HTML не должно быть подобного кода" - W3C его не запрещает, лишь "не рекомендует"

Answer 4

[Александр]

Можно сделать href="" - ведёт себя как обычная ссылка, при наведении показывает адрес текущей страницы. Но добавлять preventDefault всё равно придётся.