Як вставляти порожні посилання в HTML

Привіт:) У цьому пості покажу, як правильно вставляти порожні посилання у тегові <a> під час верстки HTML-сторінок.

Порожні посилання використовують, коли сторінки ще немає, а посилання на неї вже є. Наприклад, у меню може бути посилання на каталог, який ще не почали верстати. Інший випадок — якщо потрібно щось показати на сторінці, але без її перезавантаження. Наприклад, модальні (випливаючі) вікна.

Є декілька способів вказувати порожні посилання. Покажу в чому їх різниця та коли варто використовувати той чи інший метод.

<a href="">Сторінка</a>

Це один із найгірших варіантів, бо повністю перезавантажує сторінку.

<a href="#">Сторінка</a>

Цей спосіб змінює URL-адресу сторінки, додаючи наприкінці символ #. Якщо було site.com, то після натискання стане site.com/#. Прокручує сторінку до верху сайту. Якщо посилання було у футері, то сайт прокрутиться до самого початку.

<a href="##">Сторінка</a>

<!-- АБО -->

<a href="#!">Сторінка</a>

Це кращий варіант за попередній, оскільки сторінка не прокручується вгору. При цьому змінюється адреса сторінки, а також наприкінці додається #. Цей спосіб працює не у всіх браузерах.

<a href="#no-scroll">Сторінка</a>

Можна зробити повноцінне якірне посилання, але при цьому без елементів з id="no-scroll". Цей спосіб працює у всіх браузерах, не скролить сторінку до початку, але змінює посилання, додаючи #no-scroll у кінець адреси.

<a href="javascript:void(0);">Сторінка</a>

Досить старий спосіб, який завдяки JavaScript заставляє посилання нічого не робити. Правильніше було б написати javascript: undefined; але цей варіант довше, тому придумали більш коротку заміну void(0), який також повертає undefined. Посилання нікуди не прокручується.

<a href="something" onclick="return false;">Сторінка</a>

Тут ніщо нікуди не прокручується та не стрибає. У href можна додати будь-що, а в JavaScript не потрібно додавати новий onclick. Нову подію можна додати за допомогою addEventListener.

<a>Сторінка</a>

У новій специфікації HTML дозволили взагалі не вказувати властивість href, якщо вона не потрібна. Посилання ніби перетворюється на <span>. При цьому видаляється стандартне підкреслення знизу та синій колір, вказаний за замовчуванням. З такого посилання видаляються стани active та focus, оскільки з ним не можна взаємодіяти. Це добре, оскільки посилання дійсно немає. Але при цьому стилізація тегу <a> працює. Можна сказати, що це найкращий варіант, проте не всім підходить.

Михайло Петров
Михайло Петров

Мене звати Михайло. Я є WordPress-розробником. Створюю сайти з "нуля", розробляю плагіни, оновлюю наявний функціонал та підтримую готові проєкти.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *