Тег ссылки HTML a - полное руководство для начинающих и практикующих разработчиков

Введение

Тег ссылки <a> — один из самых важных элементов HTML. Он отвечает за навигацию между страницами, загрузку файлов, переход к определенным разделам внутри документа и даже за запуск некоторых действий в интерфейсе (например, прокрутку или открытие всплывающих окон при помощи JavaScript).

В этой статье вы увидите, как устроен тег <a>, какие атрибуты он поддерживает, как использовать его корректно с точки зрения доступности, безопасности и SEO. Смотрите, я буду показывать примеры кода и сразу пояснять, что именно в них происходит, чтобы вам было проще ориентироваться.

Основы тега ссылки <a>

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

Начнем с самого простого примера. Вот минимальная ссылка на внешний сайт:

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

Комментарии к коду:

<a href="https://example.com">
  Перейти на сайт Example
</a>
<!--
href       - адрес ресурса, на который ведет ссылка
Текст между тегами <a> и </a> - кликабельный текст ссылки
-->

Тег <a> является парным: у него есть открывающий и закрывающий тег. Внутри размещается содержимое ссылки — обычно текст, но это может быть и картинка, и иконка, и даже сложная разметка.

Например, ссылка-картинка:

<a href="https://example.com">
  <img src="logo.png" alt="Логотип Example">
</a>
<!--
Кликабельной будет картинка, а не текст
-->

Важно: тег <a> может работать без атрибута href, но тогда это уже не ссылка, а просто "область", которая может быть стилизована или использоваться для JavaScript-обработчиков. Об этом поговорим позже.

Атрибут href — адрес назначения

Что может быть в href

Атрибут href задает адрес ресурса, на который ведет ссылка. Здесь вы можете использовать:

• абсолютный URL (с протоколом и доменом)
• относительный путь (относительно текущей страницы)
• якорь (переход к элементу на той же странице)
• псевдо-протоколы (mailto, tel и другие)
• JavaScript-ссылки (не рекомендуется, но встречается)

Абсолютная ссылка

<a href="https://developer.mozilla.org/">Документация MDN</a>
<!-- Полный URL, переход на другой сайт -->

Относительная ссылка

<a href="/about.html">О компании</a>
<!-- Путь от корня сайта -->

<a href="contacts.html">Контакты</a>
<!-- Путь относительно текущей директории -->

Здесь браузер сам достроит полный адрес, используя URL текущей страницы.

Ссылка-якорь внутри страницы

<a href="#features">Смотреть возможности</a>
<!-- Переход к элементу с id="features" на этой же странице -->

<section id="features">
  <!-- Целевой блок -->
</section>

Атрибуты тега <a>

Теперь давайте разберем основные атрибуты, которые чаще всего используются с тегом ссылки.

Атрибут target — где открыть ссылку

Атрибут target задает, в каком окне или вкладке откроется ссылка.

Наиболее распространенные значения:

• _self — по умолчанию, открыть в этой же вкладке
• _blank — открыть в новой вкладке/окне
• _parent, _top — используются во фреймах
• имя окна/фрейма — для сложных случаев навигации

Пример:

<a href="https://example.com" target="_blank">
  Открыть Example в новой вкладке
</a>

Комментарий:

<!--
target="_blank" - новая вкладка, удобно для внешних ссылок
-->

Атрибут rel — отношение и безопасность

Атрибут rel описывает отношение между текущей страницей и страницей, на которую ведет ссылка. Но его часто используют и для безопасности.

Смотрите, важный пример для комбинации target="_blank":

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
  Перейти на внешний сайт
</a>

Комментарии:

<!--
rel="noopener"   - запрещает новой вкладке получать доступ к window.opener
rel="noreferrer" - не передает заголовок Referer (адрес исходной страницы)
-->

Без noopener внешняя страница теоретически может управлять исходным окном через window.opener, что является уязвимостью.

Другие полезные значения rel:

• nofollow — говорит поисковикам не передавать "вес" по ссылке
• ugc — ссылка создана пользователями (например, в комментариях)
• sponsored — спонсорская или рекламная ссылка
• alternate — альтернативные версии страниц (например, RSS)

Можно комбинировать несколько значений:

<a href="https://partner-site.com"
   target="_blank"
   rel="noopener nofollow sponsored">
  Партнерский материал
</a>

Атрибут title — дополнительная подсказка

Атрибут title показывает всплывающую подсказку при наведении курсора:

<a href="/docs" title="Подробная документация по продукту">
  Документация
</a>

Но важно: title не заменяет понятный текст ссылки и не должен использоваться как единственный способ объяснить, куда ведет ссылка. Пользователи на мобильных устройствах и некоторые скринридеры могут не получить эту подсказку.

Атрибут download — скачать вместо открытия

Если вы хотите, чтобы файл скачивался, а не открывался в браузере, используйте download:

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

Вы можете задать имя файла:

<a href="/files/report.pdf" download="otchet-2025.pdf">
  Скачать отчет
</a>
<!--
Браузер предложит сохранить файл под именем otchet-2025.pdf
-->

Обратите внимание: браузер может игнорировать download для сторонних доменов по соображениям безопасности.

Атрибут hreflang — язык целевой страницы

hreflang указывает язык содержимого, на которое ведет ссылка:

<a href="https://example.com/en" hreflang="en">
  English version
</a>

Это полезно для многоязычных сайтов и помогает поисковикам лучше понимать структуру версий.

Атрибут type — MIME-тип ресурса

Иногда указывают тип содержимого:

<a href="/files/report.pdf" type="application/pdf">
  Открыть отчет в PDF
</a>

Сейчас этот атрибут редко критичен, так как сервер сам отдает правильный заголовок Content-Type, но его можно встретить в спецификациях и старом коде.

Виды ссылок: внешние, внутренние, якорные

Внешние ссылки (на другие сайты)

Внешняя ссылка — это ссылка на другой домен:

<a href="https://news.ycombinator.com" target="_blank" rel="noopener">
  Читать новости на Hacker News
</a>

Для внешних ссылок часто:

• добавляют target="_blank" (чтобы не "уводить" пользователя с сайта)
• добавляют rel="noopener" (и при необходимости noreferrer, nofollow)

Внутренние ссылки (по сайту)

Внутренняя ссылка ведет на тот же домен:

<a href="/blog/">Блог</a>
<a href="/blog/how-to-use-a-tag.html">Статья о ссылках</a>

Внутренние ссылки помогают:

• строить навигацию
• улучшать SEO
• связывать контент логически

Якорные ссылки (переход внутри страницы)

Теперь давайте разберем якоря подробнее. Смотрите, как это устроено:

<!-- Ссылка-якорь -->
<a href="#faq">Перейти к разделу с FAQ</a>

<!-- Где-то ниже на странице -->
<h2 id="faq">Часто задаваемые вопросы</h2>

Комментарий:

<!--
href="#faq"    - ссылка на элемент с id="faq"
id="faq"       - идентификатор целевого блока
-->

Вы можете добавлять якоря не только к заголовкам, но и к любым другим элементам.

Якорь на другую страницу

<a href="/article.html#comments">
  Перейти сразу к комментариям в статье
</a>

Стилизация ссылок: CSS и пользовательский опыт

Базовые состояния ссылок

У ссылки есть несколько состояний, которые можно стилизовать с помощью CSS:

• a:link — обычная (еще не посещенная) ссылка
• a:visited — посещенная
• a:hover — при наведении
• a:active — в момент клика
• a:focus — в фокусе клавиатуры

Пример:

/* Обычная ссылка */
a:link {
  color: #0066cc;          /* Синий цвет для стандартной ссылки */
}

/* Посещенная ссылка */
a:visited {
  color: #551a8b;          /* Фиолетовый по традиции */
}

/* При наведении мышью */
a:hover {
  text-decoration: underline; /* Подчеркивание при hover */
}

/* В момент клика */
a:active {
  color: #cc0000;          /* Временный цвет при нажатии */
}

/* Фокус для клавиатуры */
a:focus {
  outline: 2px solid #ff9900; /* Видимая рамка для навигации табом */
}

Обратите внимание на :focus — это важно для доступности. Пользователи, которые перемещаются по странице с помощью клавиши Tab, должны видеть, какая ссылка сейчас активна.

Удаление стандартного подчеркивания

Многие начинающие разработчики сразу снимают подчеркивание со ссылок:

a {
  text-decoration: none;  /* Убираем подчеркивание для всех ссылок */
}

Технически это допустимо, но тогда важно:

• стилизовать ссылки так, чтобы они были визуально понятны (цвет, фон, иконка)
• не полагаться только на цвет (для людей с дальтонизмом это может быть проблемой)

Пример более аккуратной стилизации:

a {
  color: #0066cc;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline; /* Возвращаем подчеркивание при взаимодействии */
}

Доступность ссылок (a11y)

Понятный текст ссылки

Старайтесь, чтобы текст ссылки был самодостаточным и понятным. Сравните два варианта.

Плохой пример:

<p>Подробности по этой теме вы найдете <a href="/docs">здесь</a>.</p>

Лучше так:

<p>
  Подробности по этой теме вы найдете
  <a href="/docs">в документации по продукту</a>.
</p>

Комментарий:

<!--
Во втором варианте текст ссылки "в документации по продукту"
понятен даже вне контекста окружающего текста
-->

Это особенно важно для скринридеров, которые могут зачитывать список ссылок отдельно от текста.

Использование aria-label и других атрибутов

Иногда текст, который видят пользователи, не достаточно описателен для технологий доступности. Тогда можно добавить ARIA-атрибуты.

<a href="/cart" aria-label="Перейти в корзину с выбранными товарами">
  🛒
</a>

Комментарий:

<!--
aria-label - текст, который прочитает скринридер
Для пользователей визуально ссылка представлена иконкой корзины
-->

Не злоупотребляйте ARIA: если можно сделать понятный видимый текст, лучше так и сделать.

Ссылки против кнопок

Очень частая путаница — когда использовать <a>, а когда <button>.

Общее правило:

• <a> — для перехода на другой URL (страницу, файл, якорь)
• <button> — для действий на текущей странице (открыть модалку, отправить форму, запустить скрипт)

Плохая практика — делать ссылку, которая ничего не открывает, а только запускает JavaScript:

<a href="#" onclick="openModal()">Открыть окно</a> <!-- Так лучше не делать -->

Лучше так:

<button type="button" onclick="openModal()">
  Открыть окно
</button>

Если же вам по какой-то причине очень нужно использовать <a> без href как "кнопку", делайте это осознанно и добавляйте соответствующую роль:

<a role="button" onclick="openModal()">
  Открыть окно
</a>

Но по возможности лучше разделять ответственность: для навигации — ссылки, для действий — кнопки.

Особые виды ссылок: mailto, tel и другие

Ссылка для отправки письма (mailto)

Ссылка вида mailto: открывает почтовый клиент пользователя:

<a href="mailto:support@example.com">
  Написать в поддержку
</a>

Можно сразу подставить тему и текст письма:

<a href="mailto:support@example.com
           ?subject=Вопрос по заказу
           &body=Здравствуйте%2C%20у%20меня%20есть%20вопрос...">
  Написать в поддержку по заказу
</a>

Комментарии:

<!--
subject - тема письма
body    - тело письма
Пробелы и спецсимволы кодируются в формате URL (например, %20 для пробела)
-->

Ссылка для звонка (tel)

На мобильных устройствах и некоторых десктопных приложениях ссылка tel: открывает набор номера:

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

Рекомендуется использовать международный формат номера, начиная с +.

Другие схемы (skype, whatsapp и пр.)

Бывают и другие протоколы, привязанные к приложениям:

<a href="skype:live:username?call">
  Позвонить по Skype
</a>

<a href="https://wa.me/79991234567">
  Написать в WhatsApp
</a>

Схема зависит от конкретного сервиса. Всегда проверяйте актуальную документацию.

Ссылки и JavaScript

Предотвращение перехода по ссылке

Иногда вы хотите использовать <a> для вызова JavaScript, но не переходить по адресу.

Неудачный способ — использовать href="#":

<a href="#" onclick="doSomething()">Нажмите</a>
<!-- При клике страница прокрутится к началу из-за якоря # -->

Лучше использовать:

<a href="/some-default-url" onclick="doSomething(event)">
  Выполнить действие
</a>

<script>
// Здесь мы перехватываем клик по ссылке
function doSomething(event) {
  event.preventDefault(); // Отменяем переход по ссылке
  // Здесь выполняем нужное действие
  console.log('Действие выполнено без перехода по ссылке');
}
</script>

Если логически это все-таки не переход, а действие, вернемся к предыдущему совету — использовать <button>.

Плавный скролл по якорю с помощью JS

Давайте рассмотрим пример, где ссылка ведет к якорю, а мы хотим плавную прокрутку.

<a href="#section-2" id="scroll-link">
  Перейти ко второму разделу
</a>

<section id="section-2">
  <!-- ... -->
</section>

<script>
// Находим ссылку по id
const link = document.getElementById('scroll-link');

// Вешаем обработчик клика
link.addEventListener('click', function(event) {
  event.preventDefault(); // Отменяем стандартный резкий переход

  // Находим целевой элемент по id из href
  const targetId = this.getAttribute('href').substring(1); // убираем #
  const targetElement = document.getElementById(targetId);

  // Если элемент найден - плавно прокручиваем к нему
  if (targetElement) {
    targetElement.scrollIntoView({ behavior: 'smooth' });
  }
});
</script>

Так вы сохраняете семантику ссылки (есть href и якорь), но улучшаете UX.

Ссылки и SEO

Атрибут rel="nofollow", ugc, sponsored

Поисковые системы учитывают ссылки для ранжирования страниц. Через rel вы можете управлять тем, как эти ссылки будут восприниматься.

Примеры:

<!-- Ссылка, которой вы не доверяете или не хотите передавать "вес" -->
<a href="https://unknown-site.com" rel="nofollow">
  Подробности на стороннем сайте
</a>

<!-- Ссылка, созданная пользователем (например, в комментарии) -->
<a href="https://user-site.com" rel="ugc nofollow">
  Сайт пользователя
</a>

<!-- Рекламная / спонсорская ссылка -->
<a href="https://partner.com" rel="sponsored nofollow">
  Наш партнер
</a>

Поисковики могут интерпретировать эти подсказки по-разному, но общее правило: отмечайте рекламные и пользовательские ссылки явно.

Текст ссылки и ключевые слова

Для внутренних ссылок старайтесь:

• использовать осмысленный анкор (текст ссылки)
• избегать одинакового анкора для ссылок на разные страницы
• не злоупотреблять "читать далее" без уточнения (лучше "читать далее о теге a")

Это помогает поисковикам лучше понимать структуру и темы вашего сайта.

Примеры практического использования

Меню навигации на сайте

Давайте посмотрим на классический пример навигации:

<nav>
  <a href="/">Главная</a>
  <a href="/services">Услуги</a>
  <a href="/pricing">Цены</a>
  <a href="/contacts">Контакты</a>
</nav>

Можно добавить подсветку активного пункта:

<nav class="main-nav">
  <a href="/" class="nav-link nav-link--active">Главная</a>
  <a href="/services" class="nav-link">Услуги</a>
  <a href="/pricing" class="nav-link">Цены</a>
  <a href="/contacts" class="nav-link">Контакты</a>
</nav>

.main-nav .nav-link {
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
}

.main-nav .nav-link--active {
  font-weight: bold;
  border-bottom: 2px solid #0066cc; /* Подчеркиваем активный раздел */
}

Список ссылок на документы с указанием формата

Хороший тон — указывать формат и размер файла:

<ul>
  <li>
    <a href="/files/guide.pdf" download>
      Руководство пользователя (PDF, 2.3 МБ)
    </a>
  </li>
  <li>
    <a href="/files/specs.docx" download>
      Техническая спецификация (DOCX, 1.1 МБ)
    </a>
  </li>
</ul>

Пользователь заранее понимает, что произойдет при клике.

Иконка рядом с внешней ссылкой

Иногда полезно визуально отмечать внешние ссылки.

<a href="https://github.com" target="_blank" rel="noopener" class="external-link">
  Репозиторий на GitHub
  <span aria-hidden="true">↗</span>
</a>

.external-link span {
  margin-left: 4px;
  font-size: 0.9em;
}

Комментарий:

<!--
aria-hidden="true" - иконка не зачитывается скринридеру,
потому что она несет чисто визуальный смысл
-->

Типичные ошибки при работе с тегом <a>

Ссылка без href

<a>Кликабельный текст?</a> <!-- Не будет ссылкой -->

Без href элемент не считается ссылкой для браузера и технологий доступности. Если это должна быть ссылка — обязательно добавляйте href.

Использование JavaScript в href

<a href="javascript:doSomething()">Нажмите</a> <!-- Так лучше не делать -->

Проблемы:

• трудно тестировать и поддерживать
• мешает безопасным политикам (Content Security Policy)
• может быть заблокировано браузером

Лучший вариант — вешать обработчики через JS, а в href указывать нормальный URL или якорь.

Ссылки, маскирующие загрузку файлов

Когда пользователь ожидает перейти на страницу, но вместо этого начинается скачивание, это воспринимается как "ловушка". Старайтесь явно указывать, если ссылка ведет на файл, а не страницу.

Теперь давайте кратко подведем итоги по теме тега <a>.

Тег ссылки <a> — фундаментальный элемент HTML, который отвечает за навигацию, открытие ресурсов, скачивание файлов и перемещение по странице. Он поддерживает широкий набор атрибутов: href, target, rel, download, title, hreflang, type и другие, которые позволяют контролировать поведение, безопасность и семантику ссылок.

При использовании <a> важно:

• всегда задавать корректный href, если это ссылка
• выбирать правильные значения target и rel (особенно для _blank)
• писать осмысленный текст ссылки, а не "сюда" и "кликните"
• учитывать доступность и SEO
• не подменять ссылки кнопками и наоборот

Показывая вам примеры, я старался разобрать самые типичные сценарии: от простых переходов до якорей, загрузки файлов, mailto-ссылок и сочетания ссылок с JavaScript и CSS. Этого уже достаточно, чтобы уверенно использовать <a> в реальных проектах и избегать распространенных ошибок.

Частозадаваемые технические вопросы по тегу <a>

Как сделать так, чтобы ссылка выглядела как обычный текст, но при этом оставалась доступной?

Используйте аккуратную стилизацию, не убирая полностью признаки кликабельности:

a.as-text {
  color: inherit;               /* Цвет как у обычного текста */
  text-decoration: underline;   /* Сохраняем подчеркивание */
}

a.as-text:hover,
a.as-text:focus {
  text-decoration: underline;   /* Можно усилить или сохранить эффект */
}

В HTML:

<a href="/terms" class="as-text">условиями использования</a>

Так ссылка визуально вписывается в текст, но пользователь понимает, что по ней можно кликнуть.

Как сделать, чтобы при клике по ссылке открывался файл в новой вкладке, а не скачивался?

Не используйте атрибут download и убедитесь, что сервер отдает корректный Content-Type. Пример:

<a href="/files/manual.pdf" target="_blank" rel="noopener">
  Открыть инструкцию в новой вкладке
</a>

Если браузер все равно скачивает файл, дело в заголовках ответа сервера (Content-Disposition: attachment). Это нужно поправить на стороне сервера.

Как отключить возможность перехода по ссылке при определенном условии (например, пользователь не авторизован)?

Решите условие на стороне JavaScript:

<a href="/profile" id="profile-link">Профиль</a>

<script>
// Допустим, у нас есть флаг авторизации
const isLoggedIn = false; // Здесь может быть реальная проверка

const link = document.getElementById('profile-link');

link.addEventListener('click', function(event) {
  if (!isLoggedIn) {
    event.preventDefault(); // Блокируем переход
    alert('Необходимо авторизоваться перед переходом в профиль');
  }
});
</script>

Так вы сохраняете семантику ссылки, но контролируете поведение.

Как сделать ссылку, которая ведет на верх страницы, но с плавной прокруткой?

Сначала создайте ссылку с якорем на начало:

<a href="#top" id="to-top">Наверх</a>

<!-- В самом верху страницы -->
<div id="top"></div>

Добавьте JS для плавного скролла:

<script>
document.getElementById('to-top').addEventListener('click', function(event) {
  event.preventDefault(); // Отменяем резкий переход
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // Плавная прокрутка
  });
});
</script>

Как запретить поисковым системам переходить по конкретной ссылке, не меняя поведение для пользователя?

Используйте атрибут rel="nofollow":

<a href="https://external-site.com" rel="nofollow">
  Внешний ресурс
</a>

Пользователь будет переходить по ссылке как обычно, а поисковики получат подсказку не учитывать эту ссылку при ранжировании.