Як зробити порожнє посилання в HTML

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

Порожні посилання використовують у ситуаціях, коли сторінки ще немає, а посилання на неї вже є. Наприклад, у меню може бути пункт "Каталог", але відповідну сторінку ще не почали верстати.

Інший поширений випадок — елемент інтерфейсу, який зовні виглядає як посилання, але фактично має виконувати JavaScript-дію. Наприклад, відкривати модальне вікно, меню, підказку або інший інтерактивний компонент.

На перший погляд здається, що достатньо написати:

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

Але такий підхід має свої недоліки. Існує декілька способів зробити посилання "порожнім", і вони поводяться по-різному.

Розберімо основні варіанти та визначимо, який із них краще використовувати.

Що таке порожнє посилання

Під "порожнім посиланням" зазвичай мають на увазі <a>, яке тимчасово або навмисно не веде на іншу сторінку.

Наприклад:

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

або:

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

Але важливо розрізняти справжнє посилання та інтерактивний елемент.

Якщо натискання повинно переводити користувача на іншу URL-адресу, варто використовувати <a href="...">.

Якщо натискання лише запускає дію на поточній сторінці — наприклад, відкриває меню або модальне вікно — семантично правильніше використовувати <button>.

Це одна з найважливіших рекомендацій у сучасній HTML-верстці.

🔴 <a href=""> — посилання на поточну сторінку

Найпростіший варіант:

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

На перший погляд воно виглядає як порожнє посилання. Але href="" не означає "нічого не робити".

Порожнє значення href фактично посилається на поточний документ. Після натискання браузер може повторно завантажити поточну сторінку.

Тому використовувати цей варіант як заглушку для посилання зазвичай не варто.

Особливо небажано використовувати його для елементів, які повинні лише виконувати JavaScript-код.

🟡 <a href="#"> — популярна, але неідеальна заглушка

Дуже поширений варіант:

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

Символ # означає фрагмент URL.

Якщо поточна адреса:

https://site.com/page/

після натискання вона може перетворитися на:

https://site.com/page/#

Крім зміни URL, браузер зазвичай переміщує прокрутку до початку документа.

Саме тому можна зустріти ситуацію, коли користувач натискає на посилання внизу сторінки, а його раптом переносить нагору.

Це особливо неприємно для меню, футера та інших елементів, які розташовані далеко від початку документа.

Чому цей варіант досі використовують?

Причина проста — він короткий і добре знайомий розробникам.

Наприклад:

<a href="#" class="open-modal">Відкрити</a>

а потім JavaScript перехоплює клік.

Однак сьогодні є кращі способи.

🟠 <a href="##"> або <a href="#!">

Іноді можна зустріти такі конструкції:

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

або:

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

Ідея полягає в тому, що браузер бачить фрагмент URL, але не знаходить відповідного елемента на сторінці.

Наприклад:

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

після натискання змінює адресу на:

https://site.com/page/#!

При цьому сторінка зазвичай не прокручується до початку.

Але називати такий спосіб правильним рішенням не варто.

#! свого часу широко використовувався у старих JavaScript-застосунках для навігації, але для звичайної HTML-розмітки він не дає особливих переваг.

Крім того, URL все одно змінюється.

🟢 Неіснуючий якір: <a href="#no-scroll">

Ще один варіант — вказати фрагмент, якому не відповідає жоден елемент:

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

Якщо на сторінці немає:

id="no-scroll"

то браузер не знайде цільовий елемент.

Це означає, що сторінка не повинна переміщувати прокрутку до конкретного елемента.

При цьому URL зміниться:

https://site.com/page/#no-scroll

Цей спосіб є значно передбачуванішим за href="#", але проблема із зміною URL нікуди не зникає.

Тому використовувати випадковий id як спосіб зробити "порожнє" посилання теж не найкраща практика.

🔴 <a href="javascript:void(0);">

Старий, але досі поширений варіант:

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

javascript: дозволяє виконувати JavaScript безпосередньо з атрибута href.

Функція void(0) повертає undefined, тому фактично жодної навігації не відбувається.

У результаті натискання на таке посилання не змінює URL і не переміщує сторінку.

Але сьогодні цей спосіб вважається застарілим.

Краще не поміщати JavaScript-код у href, а обробляти подію окремо.

Наприклад:

<a href="/catalog/" class="catalog-link">Каталог</a>

document.querySelector('.catalog-link').addEventListener('click', function (event) {
    event.preventDefault();

    // JavaScript-логіка
});

У такому випадку HTML залишається зрозумілим, а JavaScript — окремим.

🟡 <a href="something" onclick="return false;">

Ще один спосіб:

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

return false скасовує стандартну дію посилання.

Тому браузер не переходить на адресу з href.

Перевага такого підходу в тому, що можна вказати реальну адресу:

<a href="/catalog/" onclick="return false;">
    Каталог
</a>

а потім перехопити натискання JavaScript-кодом.

Проте вбудовувати JavaScript у HTML через onclick теж не рекомендується.

Краще використовувати addEventListener():

<a href="/catalog/" class="catalog-link">
    Каталог
</a>

document.querySelector('.catalog-link').addEventListener('click', function (event) {
    event.preventDefault();

    // потрібна дія
});

Такий код легше підтримувати, тестувати та масштабувати.

🟢 <a> без href

HTML дозволяє створити елемент <a> без атрибута href:

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

Але тут є важливий нюанс.

Такий елемент не є посиланням.

Без href елемент <a> не має поведінки звичайного посилання: він не веде на URL і не має тієї самої семантики інтерактивного посилання.

Наприклад:

<a href="/catalog/">Каталог</a>

— це посилання.

А:

<a>Каталог</a>

— просто елемент-якір без визначеного призначення.

Він може бути корисним у певних сценаріях стилізації або як частина спеціальної HTML-структури, але використовувати його як заміну <button> не варто.

⭐ Найкращий варіант для JavaScript — <button>

Якщо елемент не повинен переходити на іншу сторінку, а лише виконувати дію, використовуйте кнопку:

<button type="button">Відкрити меню</button>

Наприклад, для модального вікна:

<button type="button" class="open-modal">
    Відкрити вікно
</button>

JavaScript:

document.querySelector('.open-modal').addEventListener('click', function () {
    // Відкриваємо модальне вікно
});

Це семантично правильніше, ніж:

<a href="#">Відкрити вікно</a>

Кнопка вже за своїм призначенням означає: "натисни мене, щоб виконати дію".

Посилання означає: "перейди за цією адресою".

🔗 Якщо сторінки ще немає

А що робити, якщо сторінка справді повинна бути, але її ще не створили?

Наприклад, є пункт:

<a href="/catalog/">Каталог</a>

але /catalog/ поки не існує.

У такій ситуації краще залишити майбутню URL-адресу, якщо вона вже відома:

<a href="/catalog/">Каталог</a>

Це краще, ніж:

<a href="#">Каталог</a>

або:

<a href="javascript:void(0);">Каталог</a>

Коли сторінку буде створено, HTML уже не доведеться змінювати.

А якщо сторінка тимчасово недоступна, але її не можна відкривати користувачам, можна окремо продумати стан меню або використовувати кнопку/неактивний елемент залежно від сценарію.

🚫 Чому не варто зловживати "порожніми" посиланнями

Порожнє посилання може створювати проблеми не лише з прокруткою.

Зміна URL

Варіанти з #, #! або #no-scroll змінюють адресу сторінки.

Це може бути небажано, якщо URL використовується для:

• копіювання адреси;
• аналітики;
• навігації браузером;
• закладок;
• роботи JavaScript із location.hash.

Проблеми з історією браузера

Зміна фрагмента URL може впливати на історію переходів.

У результаті користувач може натиснути "Назад" і отримати неочікувану поведінку.

Доступність

Посилання та кнопка мають різне призначення.

Якщо елемент відкриває меню, модальне вікно або виконує іншу дію, використання <a> замість <button> може погіршити взаємодію з клавіатурою та допоміжними технологіями.

♿ Не забувайте про клавіатуру та доступність

При створенні інтерактивних елементів недостатньо просто зробити так, щоб вони реагували на клік мишкою.

Кнопка:

<button type="button">Відкрити меню</button>

вже має правильну поведінку для клавіатури.

Користувач може перейти до неї за допомогою Tab та активувати клавішею Enter або Space.

Якщо ж створювати псевдокнопку на основі звичайного <div>:

<div class="open-menu">Меню</div>

то доведеться самостійно реалізовувати багато поведінки.

Тому для дій використовуйте <button>, а для навігації — <a href>.

🧩 Коли використовувати <a>, а коли <button>

Можна запам'ятати дуже просте правило.

Потрібно перейти на іншу URL-адресу?

Використовуйте:

<a href="/catalog/">Каталог</a>

Потрібно виконати дію на поточній сторінці?

Використовуйте:

<button type="button">Відкрити</button>

Наприклад:

Завдання	Елемент
Перейти на сторінку	<a href="...">
Відкрити статтю	<a href="...">
Перейти до іншого розділу	<a href="#section">
Відкрити модальне вікно	<button>
Відкрити/закрити меню	<button>
Показати/сховати блок	<button>
Запустити JavaScript-дію	<button>
Завантажити файл	<a href="file.pdf">
Перейти на зовнішній сайт	<a href="https://...">

📌 А якщо дуже потрібно саме порожнє <a>?

Іноді під час верстки потрібно тимчасово залишити саме <a>, наприклад через вимоги готового дизайну або структури CMS.

У такому випадку можна використовувати:

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

і скасувати стандартну дію через JavaScript:

document.querySelector('.link').addEventListener('click', function (event) {
    event.preventDefault();
});

Але ще краще — не робити так без необхідності.

Якщо це тимчасова заглушка під майбутню сторінку, вкажіть майбутню адресу:

<a href="/catalog/">Каталог</a>

Якщо це інтерактивний елемент — використовуйте:

<button type="button">Каталог</button>

🧩 SEO-блок "Який спосіб вибрати"

Ця коротка таблиця вам допоможе у виборі.

Завдання	Елемент
Перехід на іншу сторінку	<a href="/page/">
Перехід до секції сторінки	<a href="#section">
Сторінка ще не створена, але URL відома	<a href="/future-page/">
Відкриття модального вікна	<button>
Відкриття меню	<button>
Запуск JavaScript-дії	<button>
Тимчасова заглушка	Залежить від сценарію
href="#"	Краще уникати без потреби
javascript:void(0)	Не рекомендується

💡 Висновок

Існує багато способів створити "порожнє" посилання:

<a href="">...</a>

<a href="#">...</a>

<a href="#!">...</a>

<a href="#no-scroll">...</a>

<a href="javascript:void(0);">...</a>

<a href="something" onclick="return false;">...</a>

<a>...</a>

Але більшість із них — це радше історичні або компромісні рішення.

Для сучасної верстки варто орієнтуватися не на те, як змусити <a> нічого не робити, а на те, який HTML-елемент відповідає призначенню компонента.

Якщо це навігація — використовуйте:

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

Якщо це дія без переходу — використовуйте:

<button type="button">Відкрити</button>

А якщо сторінки ще немає, але URL вже відома, найкраще одразу вказати майбутню адресу:

<a href="/catalog/">Каталог</a>

Так HTML буде семантичним, передбачуваним і простішим для подальшої підтримки.

❓ FAQ