Тег a (от английского anchor, «якорь») превращает текст, картинку или целый блок в гиперссылку: адрес указывается в атрибуте href, а всё, что находится между открывающим и закрывающим тегом, становится кликабельным. Тег парный, закрывающий обязателен.
Обычно вид и назначение элемента задаёт сам тег, но у a многое зависит от его атрибутов. С их помощью ссылка может открыть страницу, скачать файл, запустить почтовую программу или вообще не выполнять переход. О путях и якорях подробно рассказано в уроке о ссылках, а здесь разберём остальные возможности тега.
<p>Как связаться: <a href="/p/kontakti.html">контакты</a>.</p>В этой статье
- Тег a в HTML: какой атрибут обязателен и что будет без href
- Атрибут href тега a: адрес, якорь, mailto и tel
- Атрибут target тега a: как открыть ссылку в новой вкладке или окне
- Атрибут rel у тега a: nofollow, sponsored, ugc, noopener и noreferrer
- Атрибуты download, title, ping, hreflang и type у тега a: что делает каждый
- Что можно вложить в тег a: картинка, div, заголовок и кнопка
- Тег a по умолчанию: как убрать подчёркивание, сменить цвет и сделать ссылку блочной
- Стили тега a: :link, :visited, :hover, :focus и порядок правил
- Тег a или button: как сделать ссылку кнопкой и когда так делать не нужно
- Частые ошибки с тегом a
Тег a в HTML: какой атрибут обязателен и что будет без href
Обязательных атрибутов у a нет, но без href ссылки тоже нет. Такой элемент называют ссылкой-заглушкой: в стандарте HTML это элемент без адреса, который пока не ведёт на другую страницу
. Браузер выводит только её содержимое, как обычный текст. Поэтому обязателен именно href. Остальные атрибуты — target, download, rel, ping, hreflang, type, referrerpolicy — имеют смысл только вместе с href.
<a href="/p/kontakti.html">Контакты</a>
<a>Контакты</a>Пример: ссылка, пустой href, решётка и заглушка
Выберите вариант. В примере создаётся настоящий элемент a, и по нему показаны цвет, подчёркивание, курсор и возможность получить фокус.
Пустой href и решётка тоже дают ссылку: она синяя, подчёркнута и принимает фокус. Заглушка выглядит как обычный текст, и нажать её нельзя. Строка :any-link показывает, считает ли CSS такой элемент ссылкой. Отсюда правило для стилей: a { color: green } покрасит и ссылки, и заглушки, а a:link { color: green } только ссылки.
a { color: green; } /* ссылки и заглушки */
a:link { color: green; } /* только ссылки */Атрибут href тега a: адрес, якорь, mailto и tel
В href указывают URL: полный адрес, путь от корня сайта или от текущей папки либо якорь. Пути объясняет урок «Абсолютные и относительные ссылки», якорь на своей странице — раздел «Ссылка на часть текущей страницы». Здесь разберём, что будет, если якорь указан неточно.
| Что указано в href | Что произойдёт | Пример кода |
|---|---|---|
# | Страница прокрутится в самое начало | <a href="#">Наверх</a> |
#top, элемента с id="top" на странице нет | Страница прокрутится в самое начало | <a href="#top">Наверх</a> |
#sec, на странице есть элемент с id="sec" | Страница прокрутится к этому элементу | <a href="#sec">К разделу</a> |
#Sec, а на странице id="sec" | Ничего не произойдёт: регистр букв важен | <a href="#Sec">К разделу</a> |
#nothing, такого id на странице нет | Страница останется на месте, а в адресе появится #nothing | <a href="#nothing">К разделу</a> |
#old, на странице есть <a name="old"> | Страница прокрутится к этому месту: старый способ ещё работает | <a href="#old">К якорю</a> |
Пример: мини-страница с якорями
Прокрутите мини-страницу вниз и нажмите ссылку. Пример работает как браузер: ищет элемент с таким id (или старый якорь с name) и прокручивает к нему. Если не нашёл, страница остаётся на месте.
Ссылка на почту начинается с mailto:, на телефон — с tel:. После адреса почты через вопросительный знак можно добавить тему письма (subject) и текст (body). Пробел в них пишут как %20. Номер телефона пишут в международном формате, начиная с плюса.
<a href="mailto:hello@example.com?subject=Order%20115">
Написать нам
</a>
<a href="tel:+380441234567">Позвонить</a>Пример: ссылки на почту и телефон
Нажмите ссылку: откроется почтовая программа или набор номера, если они есть на устройстве.
Атрибут name у a устарел: чтобы отметить место на странице, запишите id у нужного элемента.
Атрибут target тега a: как открыть ссылку в новой вкладке или окне
Атрибут target указывает, где откроется страница по ссылке. Значения, которые начинаются с подчёркивания, — ключевые слова, любое другое значение считается названием вкладки.
| Значение | Где откроется | Пример кода |
|---|---|---|
_self (по умолчанию) | В этой же вкладке | <a href="/p/tegi-html.html" target="_self">Шпаргалка</a> |
_blank | В новой вкладке. Каждое нажатие открывает ещё одну | <a href="/p/tegi-html.html" target="_blank">Шпаргалка</a> |
_parent | Для ссылки внутри iframe: вместо страницы, в которую встроен фрейм | <a href="/p/tegi-html.html" target="_parent">Шпаргалка</a> |
_top | Для ссылки внутри iframe: во всём окне, вместо всех вложенных фреймов | <a href="/p/tegi-html.html" target="_top">Шпаргалка</a> |
docs (любое название) | Во вкладке с таким названием. Если её нет, браузер создаст, а следующие ссылки с этим названием откроются в ней же | <a href="/p/tegi-html.html" target="docs">Шпаргалка</a> |
Пример: новая вкладка и вкладка с названием
Нажмите обе ссылки в каждой строке. Для _blank получится две вкладки, для docs — одна.
Раньше страница в новой вкладке могла управлять исходной через window.opener. Теперь браузер закрывает этот доступ сам: у ссылки с target="_blank" в новой вкладке window.opener равен null. Вернуть доступ можно, только указав rel="opener". О защите — в следующем разделе и в уроке «Ссылка, которая открывается в новой вкладке».
Читатель не видит заранее, что ссылка откроется в новой вкладке. Если такие ссылки на сайте не отмечены значком, это неожиданность.
Атрибут rel у тега a: nofollow, sponsored, ugc, noopener и noreferrer
Атрибут rel содержит список значений через пробел и описывает, как текущая страница связана с той, на которую ведёт ссылка. Значения nofollow, sponsored и ugc адресованы поисковой системе, значения noopener, noreferrer и opener — браузеру.
| Значение | Кому | Что означает | Пример кода |
|---|---|---|---|
nofollow | Поиск | Общее значение: владелец не хочет, чтобы поисковик связывал его сайт со страницей по ссылке | <a href="https://example.com" rel="nofollow">Сайт</a> |
sponsored | Поиск | Рекламная или платная ссылка | <a href="https://example.com" rel="sponsored">Партнёр</a> |
ugc | Поиск | Ссылка из пользовательского контента: комментария, сообщения на форуме | <a href="https://example.com" rel="ugc">Сайт читателя</a> |
noopener | Браузер | Новая вкладка не получает window.opener. Для _blank включено само | <a href="https://example.com" target="_blank" rel="noopener">Сайт</a> |
noreferrer | Браузер | Не отправлять заголовок Referer с адресом вашей страницы | <a href="https://example.com" rel="noreferrer">Сайт</a> |
opener | Браузер | Оставить новой вкладке доступ к исходной странице | <a href="https://example.com" target="_blank" rel="opener">Сайт</a> |
В документации Google nofollow, sponsored и ugc названы подсказками, а не командами. Значения можно указывать вместе: rel="ugc nofollow". Для читателя ничего не меняется: ссылка открывается как обычно.
Что получает чужой сайт: заголовок Referer
Заголовок Referer сообщает сайту, с какой страницы пришёл читатель. Им управляют rel="noreferrer" и атрибут referrerpolicy.
| Вариант | Что придёт в Referer | Пример кода |
|---|---|---|
| Без атрибутов | Только адрес сайта, без пути | <a href="https://example.com">Сайт</a> |
rel="noreferrer" | Ничего | <a href="https://example.com" rel="noreferrer">Сайт</a> |
referrerpolicy="no-referrer" | Ничего | <a href="https://example.com" referrerpolicy="no-referrer">Сайт</a> |
referrerpolicy="unsafe-url" | Полный адрес страницы, с путём и параметрами | <a href="https://example.com" referrerpolicy="unsafe-url">Сайт</a> |
Дописывать noopener ко всем ссылкам с target="_blank" не обязательно: защита уже включена. Так оформлены внешние ссылки на этом сайте; лишний noopener не помешает, но и не нужен:
<a href="https://html.spec.whatwg.org/"
rel="nofollow noopener" target="_blank">
Стандарт HTML
</a>Атрибуты download, title, ping, hreflang и type у тега a: что делает каждый
Кроме href, target и rel у ссылки есть атрибуты, о которых пишут реже. В таблице показано, что делает каждый атрибут и как он пишется.
| Атрибут | Что делает | Пример кода |
|---|---|---|
download | Предлагает сохранить файл вместо перехода, а значение задаёт имя файла. Работает для файлов на вашем домене: для файла с другого сайта браузер просто перейдёт по адресу | <a href="/files/price.pdf" download="price-2026.pdf">Прайс</a> |
title | Показывает подсказку при наведении указателя. У ссылки без текста и без alt служит её названием для программ экранного чтения | <a href="/p/kontakti.html" title="Как связаться">Контакты</a> |
ping | Когда читатель нажимает ссылку, браузер отправляет запрос на указанный адрес, например для подсчёта переходов | <a href="/price/" ping="https://example.com/count">Цены</a> |
hreflang | Сообщает язык страницы по ссылке. Носит информационный характер | <a href="/en/" hreflang="en">English</a> |
type | Сообщает тип файла по ссылке. Носит информационный характер: тип определяет сервер | <a href="/files/price.pdf" type="application/pdf">Прайс</a> |
referrerpolicy | Управляет заголовком Referer, см. таблицу в предыдущем разделе | <a href="https://example.com" referrerpolicy="no-referrer">Сайт</a> |
Для важного пояснения title не подходит: подсказка появляется только при наведении указателя. То, что читатель должен узнать до нажатия, — формат и размер файла — пишут в тексте ссылки.
Что можно вложить в тег a: картинка, div, заголовок и кнопка
Внутри a можно разместить текст, картинку, span, а там, где допустимы блоки, и блоки: div, заголовки, абзацы. Так собирают кликабельные карточки. Нельзя вкладывать другую ссылку, кнопку, поле ввода и любой элемент с атрибутом tabindex. Браузер не выдаёт ошибку, но результат получается не тот, что задумал автор.
Пример: что можно вложить и что нельзя
Выберите вариант. Первые три допустимы, последние две — ошибки. Пример вставляет разметку в страницу, и вы видите, как её разобрал браузер.
Тег a по умолчанию: как убрать подчёркивание, сменить цвет и сделать ссылку блочной
Без стилей сайта ссылка синяя и подчёркнутая, курсор над ней превращается в руку, а сама она строчная: display: inline, как у span. Если родитель — контейнер flex или grid, ссылка автоматически становится блочной (display: block). Поэтому ссылка строчная, пока родитель или ваш стиль не задали другое.
В примерах ниже видно, как это выглядит и как пишется. Пунктир вокруг ссылки показывает кликабельную область.
Пример: цвет, подчёркивание и блочная ссылка
В каждой строке сверху код, ниже — результат. Ссылки в примере никуда не ведут.
Убрать подчёркивание можно правилом text-decoration: none. Но вместе с линией пропадает главный признак ссылки внутри текста. Если цвет отличается слабо, читатель ссылку не заметит. Поэтому сохраните линию (можно тоньше и ниже) либо покажите её при наведении. Без линии ссылка должна отличаться чем-то ещё: цветом, толщиной букв.
Стили тега a: :link, :visited, :hover, :focus и порядок правил
Внешний вид ссылки зависит от состояния, и у каждого состояния есть свой псевдокласс. В таблице показано, когда он срабатывает и как выглядит правило.
| Псевдокласс | Когда включается | Пример кода |
|---|---|---|
:link | Ссылка с href, которую читатель ещё не открывал | a:link { color: #0b5cd5; } |
:visited | Ссылка на адрес, который читатель уже открывал | a:visited { color: #7a3db8; } |
:hover | Над ссылкой находится указатель мыши | a:hover { color: #d9232e; } |
:focus | Ссылка выбрана клавишей Tab или нажатием | a:focus { outline: 2px solid #1c9e93; } |
:focus-visible | Фокус, который браузер показывает читателю, например после Tab | a:focus-visible { outline: 2px solid #1c9e93; } |
:active | Ссылку нажимают прямо сейчас | a:active { color: #8a0000; } |
Пример: ссылка в каждом состоянии
Сверху настоящая ссылка: наведите на неё указатель, нажмите Tab или нажмите мышью. Ниже каждое состояние показано отдельно, рядом приведено правило.
Из правил с одинаковой специфичностью побеждает то, что записано ниже, поэтому порядок важен. Принятый порядок: :link, :visited, :hover, :active; :focus пишут рядом с :hover. Если поставить a:hover выше a:link, цвет при наведении не изменится: побеждает a:link. В примере вместо наведения используется фокус, потому что его можно передать ссылке кнопкой; порядок правил действует так же.
Пример: порядок правил и фокус
Выберите порядок и нажмите «Перевести фокус на ссылку». В одном порядке ссылка станет красной, в другом останется синей.
Посещённую ссылку браузер красит по правилу :visited, но скрипты страницы не могут узнать, посещена ли ссылка: это защита истории читателя. Поэтому в :visited разрешено менять только цвета, например color и text-decoration-color. Проверено на этом сайте в Chrome: посещённая ссылка была красной, а скрипт видел её цвет как у непосещённой.
Правило outline: none убирает кольцо фокуса, и читатель, который переходит по ссылкам клавишей Tab, перестаёт видеть, где он находится. Если стандартное кольцо не нравится, замените его своим на :focus-visible.
a:focus-visible {
outline: 2px solid #1c9e93;
outline-offset: 2px;
}Тег a или button: как сделать ссылку кнопкой и когда так делать не нужно
Правило одно: если нажатие ведёт на другой адрес — страницу, файл, раздел, — нужна ссылка a с href. Если нажатие делает что-то на текущей странице, например открывает окно или отправляет форму, нужна кнопка button. Внешний вид тут не важен: ссылку можно оформить как кнопку.
Пример: ссылка, ссылка-кнопка и настоящая кнопка
Ссылка в примере никуда не ведёт. Обратите внимание: ссылка-кнопка выглядит как кнопка, но остаётся ссылкой.
Ссылка вместо кнопки работает хуже. Код <a href="#" onclick="..."> при нажатии прокручивает страницу в начало и дописывает решётку в адрес. Код <a tabindex="0" onclick="..."> без href не срабатывает по Enter, а настоящая кнопка срабатывает. Для действия на странице берите button.
Частые ошибки с тегом a
Почти все промахи сводятся к трём причинам: нет href, неверная вложенность, неточный якорь.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
<a>Скачать</a> без href | Получилась заглушка: нет цвета и подчёркивания, фокус не принимает | Добавить href с адресом |
<a href="#" onclick="..."> для действия | Страница прокручивается в начало, адрес получает решётку | Взять button или отменять переход в обработчике |
<a href="1">один <a href="2">два</a></a> | Браузер разделяет ссылки, а текст после вложенной остаётся без ссылки | Сделать две ссылки рядом |
<a href="#"><button>...</button></a> | Одно нажатие запускает и кнопку, и переход | Оставить один элемент: ссылку или кнопку |
Не закрыт </a> | Ссылкой становится всё до конца родителя, включая абзацы | Закрыть тег сразу после текста ссылки |
download для файла на чужом сайте | Атрибут игнорируется: браузер переходит по адресу | Отдать файл со своего домена |
<a href="/"><img alt=""></a> | У ссылки нет ни текста, ни названия | Написать в alt, куда ведёт ссылка: alt="На главную" |
href="#Sec" при id="sec" | Страница остаётся на месте: регистр важен | Указать значение точно так же, как id |
a:focus { outline: none } без замены | С клавиатуры не видно, где находится фокус | Задать свой стиль на :focus-visible |
a:hover записано выше a:link | Стиль при наведении не применяется | Порядок: :link, :visited, :hover, :active |
