Ссылки: как сделать, чтобы клик работал (HTML)

Ссылка в HTML это элемент, по которому пользователь переходит на другую страницу, скачивает файл, открывает телефон или email, либо запускает действие на текущей странице. Если ссылка не срабатывает при клике, причина почти всегда в одной из простых вещей: неверный синтаксис, перекрытие другим элементом, ошибка в адресе или логика JS.

Базовый синтаксис: тег <a> и атрибут href

Рабочая ссылка строится так:

<a href="https://example.com">Перейти на сайт</a>

Ключевой момент: атрибут href должен быть. Без него браузер не считает элемент активной ссылкой.

Частые ошибки:

• Забыли href: <a>Текст</a> — не будет клика.
• Пустой href="": ведёт на текущую страницу (иногда это нужно, но чаще — ошибка).
• Опечатка в адресе: htp:// вместо http:// или https://.

Какие адреса можно ставить в href

• Абсолютный URL: https://site.com/page — работает из любого места.
• Относительный путь: /page, folder/page.html, ../other.html — удобно внутри сайта.
• Якорь на той же странице: #section-id — переход к элементу с id="section-id".
• Протокол-независимый: //site.com — автоматически подхватит http/https.
• Специальные схемы: mailto:name@example.com, tel:+79990000000, javascript:void(0) (лучше не использовать как основное решение).

Пример с якорем:

<a href="#contacts">Контакты</a>
...
<section id="contacts">
  <h2>Контакты</h2>
</section>

Важно: id должен быть уникальным на странице.

Когда ссылка есть, а клик не работает

1. Элемент перекрыт другим блоком

Частая ситуация: поверх ссылки лежит прозрачный div или слой с position. Ссылка технически есть, но клик «уходит» в верхний элемент.

Как проверить:

• В инструментах разработчика (F12) наведите на ссылку и посмотрите, какой элемент реально получает клик.
• Проверьте z-index и pointer-events. Если у родителя стоит pointer-events: none, клика не будет.

Пример проблемы:

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* или auto — зависит от задачи */
}

Если .overlay перекрывает ссылку и у него pointer-events: auto (по умолчанию), он перехватывает клики.

2. Ссылка внутри кнопки или формы

Иногда делают так:

<button><a href="/page">Кнопка-ссылка</a></button>

Это невалидно по спецификации HTML: <a> внутри <button> не должен быть. Поведение в браузерах разное, клик может не срабатывать или вести себя странно.

Правильные варианты:

• Либо просто ссылка с CSS-стилями «под кнопку»:
  html

  <a href="/page" class="btn">Перейти</a>

• Либо кнопка с JS-переходом:
  html

  <button onclick="window.location.href='/page'">Перейти</button>

Но лучше избегать JS там, где достаточно обычной ссылки.

3. Ссылка «выключена» через JavaScript

Бывает, что JS перехватывает клик и делает preventDefault():

document.querySelectorAll('a').forEach(a => {
  a.addEventListener('click', e => {
    e.preventDefault();
    // какая-то логика
  });
});

Тогда ссылка не переходит никуда, пока вы явно не добавите логику перехода. Если это не планировалось — это и есть причина «неработающего» клика.

Ссылки для действий: телефон, почта, скачивание

• Телефон:
  html

  <a href="tel:+79990000000">Позвонить</a>

  На мобильных откроется набор номера, на десктопе — зависит от ОС и настроек.

• Почта:
  html

  <a href="mailto:hello@example.com">Написать письмо</a>

  Открывает почтовый клиент или веб-интерфейс, если настроен.

• Скачивание файла:
  html

  <a href="/files/report.pdf" download>Скачать отчёт</a>

  Атрибут download подсказывает браузеру, что нужно скачать, а не открывать. Но окончательное поведение зависит от типа файла и настроек браузера.

Частые практические ситуации

Ссылка-картинка

<a href="/product-123">
  <img src="/img/product.jpg" alt="Товар 123" width="200" height="200">
</a>

Картинка становится кликабельной. Главное — не забыть alt и убедиться, что ссылка не перекрыта другими слоями.

Ссылка в списке

<ul>
  <li><a href="/about">О нас</a></li>
  <li><a href="/contacts">Контакты</a></li>
</ul>

Никаких особых правил нет: каждый <a> работает независимо.

Ссылка без подчёркивания

Подчёркивание убирают через CSS, это не ломает кликабельность:

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

Ссылка остаётся рабочей.