Як вставляти порожні посилання в 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>
працює. Можна сказати, що це найкращий варіант, проте не всім підходить.