Справочник · HTML

Тег a в HTML: атрибуты ссылки

Редакция PraktumОбновлено 22 октября 20268 мин чтенияУровень: новичок

Тег a — HTML-элемент, который создаёт гиперссылку на другую страницу, файл, якорь, почту или телефон. Адрес задаёт атрибут href, способ открытия — target, отношение к цели — rel. Без href это уже не ссылка для перехода.

Минимальный пример

Самая короткая рабочая ссылка состоит из тега, адреса и понятного текста. Вставил в файл — браузер уже ведёт на другую страницу. Почему текст важнее адреса: человек читает слова, а не URL. Если написать «тут», с экрана чтения это звучит как пустая кнопка.

<a href="/html/ssylki/">Как сделать ссылку в HTML</a>

Результат: фраза становится переходом на урок. Справочник про атрибуты остаётся здесь, сборка ссылки шаг за шагом — в уроке. Так страница отвечает на запрос «что умеет тег a», а не подменяет учебник.

Таблица атрибутов тега a

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

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

Любое содержимое тега a становится зоной клика. Поэтому картинку оборачивают в ссылку целиком: логотип ведёт на главную, превью карточки — на статью. У изображения остаётся свой alt: если картинка декоративная и рядом уже есть текст ссылки, alt оставляют пустым, чтобы скринридер не повторял одно и то же.

<a href="/">
  <img src="/favicon.svg" alt="Praktum — на главную" width="40" height="40">
</a>

Нельзя класть внутрь a другую ссылку или кнопку: вложенные интерактивные элементы ломают навигацию с клавиатуры. Если нужна подпись и картинка вместе, оба кладут в одну ссылку.

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

Атрибут download говорит браузеру: сохрани ресурс, не открывай его во вкладке. Значение — желаемое имя файла. Это работает для файлов с того же сайта. Чужой домен часто игнорирует download: браузер просто откроет файл, потому что не доверяет чужому заголовку.

<a href="/files/konspekt.pdf" download="konspekt-html.pdf" type="application/pdf">Скачать конспект PDF</a>

Почему так, а не кнопка с JavaScript: ссылка работает без скриптов, её можно открыть в новой вкладке, скопировать, отдать поисковику. Скрипт для скачивания нужен только если файл собирается на лету.

Новая вкладка и rel

Свою страницу почти всегда открывают в той же вкладке: человек не теряет историю «назад». Чужой сайт удобно открыть рядом. Пишут так:

<a href="https://html.spec.whatwg.org/" target="_blank" rel="noopener noreferrer">Спецификация HTML</a>

Современные Chrome, Firefox, Safari и Edge для target="_blank" сами включают поведение noopener. Это не повод выкидывать rel: явная запись учит читателя, страхует старые браузеры и добавляет noreferrer, если не хочешь отдавать адрес своей страницы владельцу чужого сайта.

_parent и _top

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

Как убрать подчёркивание

Браузер подчёркивает ссылку, чтобы её было видно в тексте. Убирать линию можно, но тогда нужен другой признак: цвет, жирность, фон при наведении и кольцо фокуса. Иначе ссылка неотличима от обычного предложения.

a.nav {
  color: inherit;
  text-decoration: none;
}
a.nav:hover {
  text-decoration: underline;
}
a.nav:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

a или button

Подмена ломает ожидание: «кнопка», свёрстанная ссылкой, не сработает в форме, а «ссылка»-button не даст открыть в новой вкладке. Роль важнее внешнего вида.

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

• Пустой href или href="#" вместо настоящего адреса.
• Текст «подробнее», «здесь», «клик» без названия цели.
• target="_blank" без rel в учебных примерах, которые копируют новички.
• Вложенные ссылки: картинка-ссылка внутри текстовой ссылки.
• Ссылка без фокуса: outline: none и ничего взамен.

Доступность

Ссылку можно активировать Enter. Фокус должен быть виден. Если единственный контент — иконка, у неё нужен текст: aria-label или alt у картинки. Не делай зону клика крошечной: пальцу нужны примерно 44 пикселя. Соседние ссылки не слипай без зазора.

Поддержка браузерами

Сам тег a есть во всех браузерах. Атрибут download работает в актуальных движках для файлов того же происхождения; в очень старых IE его не было. Поведение noopener у _blank браузеры выровняли в последние годы — проверяй конкретный атрибут на Can I use, а не «ссылки вообще».