HTML ссылки: тег a, href, target, rel, mailto и tel — практическое руководство

Ссылки — фундамент веба. Правильно размеченная ссылка в HTML помогает пользователю перейти к нужному ресурсу, а поисковику — понять структуру сайта. В этом материале разберём базовый синтаксис тега <a>, атрибуты href, target, rel, download, а также схемы mailto: и tel:. Вы получите практические советы, которые пригодятся и новичкам, и продолжающим разработчикам.

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

Минимально рабочая ссылка выглядит так:

<a href="https://example.com">Наш сайт</a>

Если href отсутствует, элемент перестаёт быть ссылкой и теряет ожидаемое поведение (клавиатурная навигация, фокус и т.д.).

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

<!-- Абсолютный -->
<a href="https://example.com/blog">Блог</a>

<!-- Относительный к текущему пути -->
<a href="../about/">О компании</a>

<!-- Относительный к корню сайта -->
<a href="/pricing/">Тарифы</a>

Совет: для внутренних ссылок используйте относительные пути — это упрощает перенос проекта между окружениями (dev, stage, prod).

3) Якорные ссылки внутри страницы (#id)

Якоря позволяют прокручивать документ к нужному элементу с заданным id.

<nav>
  <a href="#features">Фичи</a>
  <a href="#faq">FAQ</a>
</nav>

<section id="features">...</section>
<section id="faq">...</section>

<!-- Плавная прокрутка CSS -->
<style>
  html { scroll-behavior: smooth; }
</style>

Если секция появляется динамически, убедитесь, что id установлен к моменту клика по ссылке.

4) target и безопасный _blank

target="_blank" открывает страницу в новой вкладке. Но так появляется риск tabnabbing. Минимизируйте его с помощью rel:

<a href="https://external.example" target="_blank" rel="noopener noreferrer">
  Внешняя ссылка (безопасно)
</a>

Рекомендация: всегда добавляйте rel="noopener" к ссылкам с target="_blank". Для внешних ссылок часто применяют пару noopener noreferrer.

5) Атрибут rel и SEO-метки

rel уточняет отношения с целевым ресурсом:

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

<a href="https://anysite.example" rel="nofollow">Каталог сайтов</a>

<a href="https://user-link.example" rel="ugc nofollow">Ссылка из отзыва</a>

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

6) mailto и tel: быстрый контакт

Схемы mailto: и tel: открывают почтовый клиент и звонилку на мобильных.

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

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

Не забудьте URL-кодировать пробелы и кириллицу в параметрах subject и body (например, заменить пробел на %20).

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

download просит браузер скачать ресурс. Работает надёжнее для файлов того же источника (same-origin) или если сервер отдает корректный Content-Disposition.

<a href="/files/guide.pdf" download>Скачать руководство (PDF)</a>
<a href="/images/logo.png" download="brand-logo.png">Скачать логотип</a>

Имейте в виду: некоторые браузеры могут проигнорировать download для кросс-доменных ссылок или небезопасных контекстов.

8) Текст ссылки и доступность (a11y)

<a href="/pricing/">Посмотреть цены и тарифы</a>

<a href="/cart/" aria-label="Открыть корзину">
  <svg aria-hidden="true" ...></svg>
  <span class="visually-hidden">Открыть корзину</span>
</a>

9) Ссылка или кнопка?

Правило простое: переход — это <a>, действие на текущей странице — <button>. Не вкладывайте одно интерактивное в другое и не стилизуйте кнопку как ссылку без необходимости.

<!-- ПРАВИЛЬНО -->
<a href="/account/">Личный кабинет</a>
<button type="button">Открыть модалку</button>

<!-- НЕПРАВИЛЬНО: button внутри ссылки -->
<a href="/account/"><button>ЛК</button></a>

“Отключённые” ссылки лучше делать обычным текстом или добавлять aria-disabled="true" и убирать href, не забывая про стили подсказки курсора.

10) Блочные ссылки и «кликабельные карточки»

HTML5 допускает оборачивать блоки в ссылку — удобно для карточек.

<a href="/post/css-grid/" class="card">
  <h3>CSS Grid за час</h3>
  <p>Краткий гид по современной сетке.</p>
</a>

<style>
  .card { display:block; padding:16px; border:1px solid #ddd; border-radius:8px; text-decoration:none; color:inherit; }
  .card:hover { box-shadow:0 4px 16px rgba(0,0,0,.08); }
</style>

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

11) <base> и контекст ссылок (аккуратно)

<base href="..."> в <head> задаёт базовый путь для всех относительных ссылок. Это удобно, но может неожиданно «сломать» пути, если вы не контролируете всё содержимое страницы.

<head>
  <base href="https://example.com/app/">
</head>
<!-- Теперь href="assets/img.png" станет https://example.com/app/assets/img.png -->

Используйте <base> только при чёткой архитектуре путей проекта.

12) Частые ошибки и чеклист

Мини-практикум: соберём навигацию со всем важным

<header>
  <nav aria-label="Главная навигация">
    <a href="/">Главная</a>
    <a href="/blog/">Блог</a>
    <a href="/pricing/">Цены</a>
    <a href="https://twitter.com/yourbrand" target="_blank" rel="noopener noreferrer">Twitter</a>
  </nav>
  <div class="contacts">
    <a href="tel:+74951234567">+7 (495) 123-45-67</a>
    <a href="mailto:hi@example.com?subject=Вопрос%20по%20тарифам">Написать нам</a>
    <a href="/files/price.pdf" download>Скачать прайс</a>
  </div>
</header>

<main>
  <nav aria-label="Якоря страницы">
    <a href="#features">Преимущества</a>
    <a href="#faq">Вопросы и ответы</a>
  </nav>
  <section id="features">...</section>
  <section id="faq">...</section>
</main>

<style>html{scroll-behavior:smooth}</style>

Что дальше изучить

Хотите быстро и основательно прокачать вёрстку, отработать ссылки, формы, сетки и адаптив на реальных макетах? Загляните на курс «Вёрстка сайта с нуля 2.0» — там всё по шагам, с практикой и разбором ошибок. → Хочу прокачать вёрстку на понятном и практичном курсе

Итоги

Чтобы ссылки были полезны пользователю и понятны поисковику, держите в уме три вещи: корректный href, безопасный target="_blank" с rel="noopener", и осмысленный текст ссылки. Добавляйте rel-метки для SEO-контекста, используйте mailto/tel там, где это улучшает конверсию, и не путайте ссылки с кнопками. Такой чеклист уже выделит ваш HTML среди большинства проектов.

Источник