DEV Community

Rafael
Rafael

Posted on

(html) — ссылки заглушки

Создание ссылок в некуда(заглушек)

  • Рекомендуемые способы

    • Способ 1: Тег <a> без атрибута href — Официальный стандарт спецификации HTML5 (так называемый placeholder link). Используется, когда ссылка должна служить временной заглушкой (например, для текущей страницы в меню). Для превращения в полноценную заглушку со стилем ссылки требует CSS-правила cursor: pointer;.
      • Отключает выбор ссылки с клавы методом таб
      • Важное дополнение об accessibility: Этот способ делает ссылку нефокусируемой с клавиатуры (Tab). Эксперты по доступности (из Гарварда) и разработчики на Stack Overflow категорически рекомендуют добавлять атрибут tabindex="0", чтобы пользователи могли взаимодействовать с ней с клавиатуры. Без этого элементарно cursor: pointer недостаточно.
    • Способ 2: href="#блабла" + onclick="return false;" — Рабочее решение с перехватом события. Конструкция return false; в JavaScript блокирует стандартное поведение браузера. Ссылка сохраняет внешний вид, но при клике страница не скроллится наверх.
      • #блабла - любой контекст после решетки, можно 1 символ, пусто не рекомендовано запустит обработку события переход на #

  • Нерекомендуемые способы

    • Способ: javascript:void(0); — Оператор void(0) возвращает undefined, благодаря чему браузер игнорирует переход, страница не прыгает вверх, а URL в адресной строке не засоряется лишними символами.
      • - Почему плохо: Нарушает принцип ненавязчивого JavaScript, смешивает поведение с разметкой, может вызывать проблемы в браузерах с блокировщиками ссылок (некоторые антивирусы/расширения обрабатывают такие ссылки как подозрительные).
      • Актуальная рекомендация: Избегать.
    • Способ: Атрибут href="#" — Переносит пользователя на пустой якорь (в самый верх страницы). Это ломает пользовательский опыт (UX) при длинном скролле и засоряет URL-строку символом решетки.
    • Способ: Атрибут href="##" или href="#!" — Решает проблему со скроллом наверх (так как браузер ищет несуществующий ID), но все еще засоряет адресную строку и историю переходов браузера лишними символами.
    • Способ: Пустой атрибут href="" — «Нежелательное поведение: браузер воспринимает пустую строку как ссылку на текущую страницу, что приводит к перезагрузке. Этого стоит избегать, хотя технически это не ошибка валидации.»

  • Учебно тренировочный способ допустим

    • *Атрибут href="##" или `href="#!" **

CSS для способа 1

`css
/* Вариант 1: Для разработки и тестирования (подсветка забытых ссылок) */
a:not([href]) {
color: red;
text-transform: uppercase;
border: 2px dashed red;
}

/* Вариант 2: Для живого сайта (превращение плейсхолдера в обычную ссылку) /
a:not([href]) {
cursor: pointer;
color: #0066cc; / задать цвет как у обычной ссылки */
}
`

В чём фишка каждого варианта:

  1. Первый вариант (закомментированный) — это идеальный инструмент для отладки. Он работает как «сигнализация»: сразу подсвечивает красным цветом и рамкой все ссылки без адреса, чтобы верстальщик случайно не забыл поставить реальную ссылку перед запуском сайта.
  2. Второй вариант — это чистовое решение для продакшена. Оно возвращает ссылке-заглушке стандартный внешний вид и привычный пользователю курсор-палец (cursor: pointer), который у тега <a> без href по умолчанию пропадает.

Источнки

Top comments (0)