Валидность пустого href в HTML: возможные проблемы и решения

Быстрый ответ

Да, пустой атрибут href (href="") вполне допустим и указывает на текущую страницу. Он может выступать в роли временного заполнителя или быть использован для привязки сценариев JavaScript, не вызывая при этом навигацию. Использование href="#" вместе с event.preventDefault() в JavaScript помогает предотвратить нежелательную прокрутку страницы, улучшая пользовательский опыт и комфорт.

<!-- Отличный временный заполнитель: пригласите меня на кофе, и я всё покажу -->
<a href="">...</a>

<!-- Закажет пиццу не отвлекая вас от страницы — всё благодаря JavaScript! -->
<a href="#" onclick="event.preventDefault(); orderPizza();">Заказать</a>

Запомните: href="#" следует использовать с осторожностью, чтобы не ухудшить пользовательский опыт. Следует стремиться к доступным и инклюзивным подходам при работе с веб-сайтом.

Разбираемся в глубинах href

Поговорим подробнее о безопасном использовании атрибута href, о сознательном подходе к доступности контента и о неизменной ценности хороших привычек в программировании.

Наклонный взгляд на href="javascript:void(0);"

C точки зрения доступности, общепринятая практика представляется следующим образом:

<!-- След котенка мил, но не ведёт никуда -->
<a href="javascript:void(0);" onclick="playKittenVideo();">Смотреть</a>

Этот подход гарантирует, что скрин-ридеры смогут правильно распознать ссылку, и не будет происходить нежелательной перезагрузки страницы или изменений в истории заседаний браузера.

Подробнее об этом расскажет наш спикер на видео

Обеспечиваем фокусировку якорей

Якоря станут доступными для всех пользователей, если в их атрибутах присутствует href. Для якорей без href достаточно использовать tabindex, и они станут полностью подконтрольными.

<!-- Облегчите навигацию по морю вашего кода -->
<a tabindex="0">Здравствуй, моряк!</a>

Визуализация

Можно представить атрибут href как виртуальные рамы в галерее искусства:

Стены галереи искусства:

🖼️ В ожидании Моны Лизы 🖼️ Звездная ночь 🖼️ Чизкейк в раме 🖼️ Сокрытый пейзаж

Ссылка с пустым href подобна ожиданию Моны Лизы:

<a href="">В ожидании Моны Лизы 🕰️</a>

Рама на своем месте, но сама картина еще отсутствует. Она существует, однако пока не вызывает у посетителей удовольствия.

Глубже в детали

Рассмотрим подробнее стандарты и лучшие практики, гарантирующие целостное и продуманное взаимодействие пользователя с веб-сайтом.

Совместимость с HTML стандартами

Пустые href поддерживаются в стандарте HTML 4.01 и HTML5. Тем не менее, использование javascript: желательно минимизировать из-за потенциальных рисков и возможных проблем совместимости.

Заполнитель как будущий интерактивный элемент

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

Взаимодействие с браузером

href может оставить следы в истории браузера и вызвать перезагрузку страницы. Использование href="#" может случайно привести к путанице в журнале посещений, в то время как href="javascript:void(0);" не оставит никаких отметок в истории браузера.

Чек-лист доступности для разработчиков

Следующие основные правила помогут вам стать успешнее в веб-разработке:

• Атрибут href: помогает распознать элемент как гиперссылку.
• role="button": делает элемент восприимчивым как кнопку.
• Атрибут title: добавляет контекст.
• tabindex: обеспечивает доступность для навигации с помощью клавиатуры.
• Обработчики событий JavaScript: предотвращают стандартное реагирование браузера на действия пользователя.

Полезные материалы

1. HTML стандарт
2. <a>: Тег якоря – HTML: HyperText Markup Language | MDN
3. W3C | Сервис валидации HTML
4. Доступность элементов HTML5
5. HTML-техники WAI по рекомендациям к доступности веб-контента 1.0
6. Тег <a> на w3schools