Безопасно ли использовать тег anchor без href: советы

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

Использование тега <a> без атрибута href лишает его основной навигационной функции и может негативно отразиться на доступности и SEO. Для создания ссылок, не вызывающих перезагрузку страницы, лучше использовать href="#" совместно с preventDefault в JavaScript. В случае назначения действий при клике более подходящим является <button>. Если используется <a> без href для поддержки доступности (a11y), примените атрибут role="button".

<!-- Назначайте действие по клику элементу button -->
<button onclick="doAction()">Действуй, словно завтра не наступит</button>

<!-- Используйте preventDefault в JavaScript для ссылок без перезагрузки страницы -->
<a href="#" onclick="doAction(); event.preventDefault()">Действуй без промедления</a>

Разъяснения относительно пустых гиперссылок

Тег <a> без href, также известный как "пустая гиперссылка", может использоваться для обозначения текущей страницы в навигации или как временный заглушитель для динамического задания URL посредством JavaScript.

Как и для чего их использовать?

Современные динамические веб-приложения

Интерактивные веб-приложения зачастую используют элементы <a> без href, задавая адреса ссылок динамически. Тем самым поддерживается структурированное и стилизованное отображение контента.

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

Экстренные ссылки для непредвиденных обстоятельств

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

Рекомендации по обеспечению доступности

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

Размышления об отличиях в семантическом вебе и SEO

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

Добавляем элемент интерактивности

JavaScript позволяет превратить пустые гиперссылки в полноценные интерактивные элементы, расширяющие возможности для взаимодействия с пользователем без перезагрузки страницы. В старых браузерах используйте javascript:void(0) для предотвращения стандартного перехода по ссылке.

Практическое использование и альтернативы

1. Индикатор текущей страницы: Прекрасно подходит для меню навигации, помогая избежать перезагрузки текущей страницы.
2. Триггеры для пользовательских событий: Пустой тег <a> можно использовать для создания сложных пользовательских взаимодействий.
3. Семантические заместители: Теги <a> с атрибутом id могут использоваться для навигации в рамках одной страницы без внешних ссылок.

Вместо <a> без href можно использовать другие элементы HTML, например, <span> или <div> с соответствующими ARIA ролями или <button> для действий.

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

🚪🔒: <a>Кликни сюда!</a>
// Это как красная сельдь на тарелке суши: выглядит привлекательно, но в итоге оказывается бесполезной.

🚪🔓: <a href="destination.html">Кликни сюда!</a>
// Это как чипсы с горячим сырным соусом: ведёт к открытию нового мира.

Атрибут href – это волшебная палочка, превращающая обычный текст в портал, ведущий к новому контенту.

Советы от специалиста по пользовательскому интерфейсу

Умеренное использование JavaScript позволяет создавать интерфейсы, работающие как с JavaScript, так и без него. Разработка динамических URL для пустых ссылок не должна ухудшить пользовательский опыт.

Защита от ошибок

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

Об использовании якорей с ID

Тег <a> с ID может использоваться как якорь для навигации внутри одной страницы, являясь полноценной гиперссылкой в контексте семантики веба.

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

1. HTML Standard — основы работы с тегами <a>.
2. <a>: The Anchor element – HTML: HyperText Markup Language | MDN — подробное руководство по использованию тегов <a>.
3. HTML Standard — глубокое погружение в концепцию ссылок и якорных тегов в HTML.
4. Styling menus | Web Accessibility Initiative (WAI) | W3C — рекомендации по обеспечению доступности интерактивных элементов веб-интерфейса.
5. Is it valid to use a 'a' tag without href attribute? – Stack Overflow — обсуждение использования тега <a> без href среди разработчиков.
6. Checklist – The A11Y Project — чек-лист создания доступных ссылок.
7. Understanding Success Criterion 2.4.4 | Understanding WCAG 2.0 — рекомендации WCAG 2.0 по созданию навигационных элементов.