Ссылки

Элемент <a> (anchor) создаёт гиперссылку -- основу навигации в вебе, связывающую документы и ресурсы.

Зачем нужно

Ссылки -- фундамент гипертекста. Они позволяют переходить между страницами, скачивать файлы, отправлять email, звонить. Правильное использование <a> критично для SEO (внутренняя перелинковка), доступности (screen readers) и безопасности (rel="noopener").

Где используется

  • Навигация по сайту
  • Ссылки на внешние ресурсы
  • Якорные ссылки (навигация внутри страницы)
  • Скачивание файлов
  • Email и телефонные ссылки

Предпосылки

Базовый синтаксис

<a href="https://example.com">Текст ссылки</a>

Виды ссылок

Абсолютные и относительные

<!-- Абсолютная ссылка -->
<a href="https://example.com/about">О нас</a>

<!-- Относительная: от текущей страницы -->
<a href="about.html">О нас</a>
<a href="../index.html">На главную</a>

<!-- Относительная: от корня сайта -->
<a href="/about">О нас</a>
<a href="/catalog/item-1">Товар</a>

<!-- Протокол-независимая -->
<a href="//example.com/page">Ссылка</a>

<!-- Ссылка на секцию на той же странице -->
<a href="#contacts">Перейти к контактам</a>

<!-- Целевой элемент -->
<section id="contacts">
  <h2>Контакты</h2>
  <p>info@example.com</p>
</section>

<!-- Ссылка на секцию другой страницы -->
<a href="/about#team">Наша команда</a>

<!-- Наверх страницы -->
<a href="#">Наверх</a>
<a href="#top">Наверх</a>  <!-- если есть id="top" -->

Email-ссылки

<!-- Простая -->
<a href="mailto:info@example.com">Написать нам</a>

<!-- С темой и телом -->
<a href="mailto:info@example.com?subject=Вопрос&body=Здравствуйте!">
  Задать вопрос
</a>

<!-- Несколько получателей -->
<a href="mailto:info@example.com,support@example.com">
  Написать команде
</a>

Телефонные ссылки

<a href="tel:+79001234567">+7 (900) 123-45-67</a>

<!-- С добавочным -->
<a href="tel:+79001234567,123">+7 (900) 123-45-67, доб. 123</a>

Скачивание файлов

<!-- Скачать файл -->
<a href="/files/report.pdf" download>Скачать отчёт (PDF)</a>

<!-- Скачать с другим именем -->
<a href="/files/report-2026-04.pdf" download="Отчёт за апрель.pdf">
  Скачать отчёт
</a>

download работает только для same-origin URL. Для cross-origin сервер должен отправить правильные заголовки.

Атрибут target

<!-- В текущей вкладке (по умолчанию) -->
<a href="/page" target="_self">Ссылка</a>

<!-- В новой вкладке -->
<a href="https://external.com" target="_blank" rel="noopener noreferrer">
  Внешний сайт
</a>

<!-- В родительском фрейме -->
<a href="/page" target="_parent">Ссылка</a>

<!-- Во всём окне (выход из фреймов) -->
<a href="/page" target="_top">Ссылка</a>

Безопасность target="_blank"

<!-- ПЛОХО: уязвимость! Без rel внешний сайт получает доступ к window.opener -->
<a href="https://evil.com" target="_blank">Опасная ссылка</a>

<!-- ХОРОШО: rel="noopener noreferrer" -->
<a href="https://external.com" target="_blank" rel="noopener noreferrer">
  Безопасная ссылка
</a>

Современные браузеры автоматически добавляют noopener для target="_blank", но явное указание rel -- хорошая практика.

Атрибут rel

<!-- Внешние ссылки -->
<a href="https://external.com" rel="noopener noreferrer">Внешний</a>
<a href="https://partner.com" rel="nofollow">Партнёр (не передавать SEO-вес)</a>
<a href="https://ad.com" rel="sponsored">Реклама</a>
<a href="https://forum.com/post" rel="ugc">Пользовательский контент</a>

<!-- Навигация -->
<a href="/prev" rel="prev">Предыдущая</a>
<a href="/next" rel="next">Следующая</a>

<!-- Автор -->
<a href="/author/ivan" rel="author">Иван Петров</a>

<!-- Помощь -->
<a href="/help" rel="help">Справка</a>
Значение rel Назначение
noopener Не давать доступ к window.opener
noreferrer Не отправлять Referer-заголовок
nofollow Не передавать SEO-вес (PageRank)
sponsored Оплаченная ссылка
ugc User Generated Content (пользовательский)
prev / next Пагинация
author Ссылка на автора
external Внешняя ссылка

Ссылка-обёртка (HTML5)

В HTML5 <a> может оборачивать блочные элементы:

<a href="/article/42" class="card-link">
  <article class="card">
    <img src="thumb.jpg" alt="" width="300" height="200">
    <h2>Заголовок статьи</h2>
    <p>Краткое описание...</p>
  </article>
</a>

<style>
  .card-link {
    text-decoration: none;
    color: inherit;
    display: block;
  }
</style>

Состояния ссылок (CSS)

/* Порядок важен: LoVe HAte (Link, Visited, Hover, Active) */
a:link    { color: #0066cc; }         /* Непосещённая */
a:visited { color: #551a8b; }         /* Посещённая */
a:hover   { color: #0044aa; }         /* При наведении */
a:focus   { outline: 2px solid blue; } /* При фокусе (a11y!) */
a:active  { color: #cc0000; }         /* При нажатии */

Доступность ссылок

<!-- ПЛОХО: "нажмите сюда" -- бессмысленно для screen reader -->
<p>Подробнее <a href="/details">нажмите сюда</a>.</p>

<!-- ХОРОШО: текст ссылки описывает цель -->
<p><a href="/details">Подробнее о тарифах и ценах</a>.</p>

<!-- Если нужен короткий текст + развёрнутое описание -->
<a href="/report.pdf" aria-label="Скачать годовой отчёт за 2025 (PDF, 2.3 МБ)">
  Скачать отчёт
</a>

<!-- Визуальная индикация внешней ссылки -->
<a href="https://external.com" target="_blank" rel="noopener">
  Внешний сайт <span aria-hidden="true">↗</span>
  <span class="visually-hidden">(открывается в новой вкладке)</span>
</a>

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

Ошибка Почему плохо Как правильно
"Нажмите сюда" Бессмысленно вне контекста Описательный текст ссылки
target="_blank" без rel Потенциальная уязвимость rel="noopener noreferrer"
<a href="#"> как кнопка Семантически неверно, меняет URL Используй <button>
<a> без href Не фокусируется, не кликабельна href обязателен для интерактивности
<a href=""> Перезагружает текущую страницу Укажи конкретный URL
Вложенные <a> Невалидно <a> не может содержать <a>
Ссылка на javascript:void(0) Не работает без JS, плохо для a11y <button> для действий

Практика

  1. Создай навигационное меню с внутренними ссылками
  2. Добавь якорные ссылки на секции страницы
  3. Создай ссылки mailto и tel
  4. Добавь ссылку с download для скачивания файла
  5. Проверь все внешние ссылки на наличие rel="noopener noreferrer"
  6. Проверь ссылки Tab-ом -- все должны быть доступны с клавиатуры

Связанные темы

Ресурсы