Кратко
СкопированоТег <a>
превращает любой объект в ссылку.
Пример
Скопировано<a href="https://www.yandex.ru/">Яндекс</a>
<a href="https://www.yandex.ru/">Яндекс</a>
Как понять
СкопированоРазместите текст, картинку или другой элемент внутри тега <a>
, чтобы сделать его ссылкой. Ссылка может вести на любую страницу, файл, электронную почту или телефон. Для этого пропишите обязательный атрибут href
, где URL — любой адрес.

Бывает, что ссылка ведёт не на другую страницу, а на раздел внутри текущей страницы. Тогда такая ссылка называется якорной или просто «якорем». Чтобы её создать, вместо URL укажите идентификатор #id
элемента, к которому должна вести ссылка. Например, <a href
. Идентификатор можно задать для любого тега, то есть «бросить якорь» в любую часть страницы.
Как пишется
Скопировано<a href="URL">...</a>
<a href="URL">...</a>
Атрибуты
Скопированоdownload
— если кликнуть по такой ссылке, браузер предложит пользователю скачать то, что по ней находится. Это может быть файл или другая страница — главное, чтобы они находились на том же домене, что и ссылка. Если добавить атрибуту значение, можно задать название скачиваемому файлу. Например, <a href
предложит скачать файл с названием фотки.zip. Пользователь сможет изменить название при скачивании.
href
— обязательный атрибут, содержащий адрес, по которому перейдёт пользователь, нажав на ссылку. Это может быть либо URL-адрес, либо якорная ссылка #id
. Якорная ссылка ведёт на элемент с таким же #id
на этой странице. URL может вести не только на привычные страницы в интернете, но также на почту или телефон, например href
или href
. Для этого добавьте в значение атрибута один из протоколов, например, file
, mailto
или tel
.
hreflang
— указывает язык документа, на который ведёт ссылка. Этот атрибут нужен, только если у вашей страницы есть версия на другом языке. hreflang
помогает поисковикам выдавать версию на нужном языке, в зависимости от того, в какой стране находится пользователь.
ping
— этот коварный атрибут следит, что пользователь перешёл по тому URL-адресу, который в нём указан.
rel
— определяет отношение между страницей, где находится ссылка, и страницей или файлом, куда она ведёт. Обычно это очень техническая информация, которая нужна браузерам и разработчикам, чтобы определять, что находится по ссылке, и, в некоторых случаях, какое действие нужно выполнить сайту, который открывается по ссылке.
target
— определяет, где откроется ссылка: в том же окне, в новой вкладке или в новом окне браузера. Без этого атрибута содержимое ссылки откроется в той же вкладке. Вот все варианты, где можно открыть URL-ссылку:
_self
: на той же странице. Значение по умолчанию, если именно оно вам нужно, то можно не указывать этот атрибут._blank
: в новой вкладке или в новом окне браузера — это зависит от настроек браузера, но чаще всего это именно вкладка._parent
: на родительской странице от текущей, то есть уровнем вложенности выше. Например, если на страницу вставлен фрейм, а внутри него такая ссылка, то она откроется не внутри фрейма, а на той странице, куда вставлен этот фрейм. Если родительской страницы нет, то ссылка откроется вместо текущей страницы._top
: в самой высокой «корневой» странице. Например, если есть страница, куда вставлен фрейм, в который вставлен фрейм, в котором ссылка ctarget
, то ссылка откроется в самой-самой верхней странице, насколько глубоко она бы ни находилась.= " _ top"
Используйте этот атрибут, только если указан href
.
💡 Вместе с атрибутом target
обязательно используйте rel
, чтобы в момент открытия внешние сайты не узнали лишнего про текущую страницу.
type
— определяет, к какому типу относится документ по ссылке. Речь идёт о типах по стандарту MIME. Это чисто техническая информация, но её можно указать, чтобы применить общий стиль к ссылкам одного типа.
title
— это глобальный атрибут, который можно использовать и для ссылок. Он содержит текст, который будет виден при наведении на ссылку.
Подсказки
Скопировано💡 Чтобы отправить пользователя в самый верх страницы, используйте href
или href
.
💡 Обязательно указывайте атрибут href
для ссылок, без него они неотличимы от <span>
и перестают иметь смысл. Спецификация HTML допускает «логические» ссылки без href
для текущих или будущих ссылок, но практической пользы в этом мало.
💡 Якорная ссылка может также вести и на нужный раздел внешней страницы. Для этого используйте URL-ссылку, а в конце, после знака #
, добавьте ID якоря. Например: https
Ещё примеры
СкопированоСделаем так, чтобы ссылка открывалась в новой вкладке браузера:
<a href="https://doka.guide/" target="_blank"> <img src="dogs.png" alt="Три собаки: одна смотрит влево, вторая закрыла глаза и спит, третья смотрит вправо"></a>
<a href="https://doka.guide/" target="_blank"> <img src="dogs.png" alt="Три собаки: одна смотрит влево, вторая закрыла глаза и спит, третья смотрит вправо"> </a>
Сделаем ссылку для отправки письма на почту:
<a href="mailto:nowhere@yandex.ru">Отправить сообщение в никуда</a>
<a href="mailto:nowhere@yandex.ru">Отправить сообщение в никуда</a>
На практике
Скопированосоветует Скопировано
🛠 Когда нужно сделать навигацию в пределах одной страницы, например, оглавление, удобно использовать якоря — то есть ссылки на отдельные элементы. При нажатии на ссылку браузер мгновенно переместится к этому элементу.
Чтобы создать такую ссылку, нужно две вещи:
- Добавить уникальный
id
целевому элементу.= "element" - Сослаться на него с помощью ссылки вида
#element
.
<a href="#section-1"> Фотографии пёсиков</a>…<section id="section-1"> <h3>Фотографии пёсиков</h3></section>
<a href="#section-1"> Фотографии пёсиков </a> … <section id="section-1"> <h3>Фотографии пёсиков</h3> </section>
Чтобы перемещение по якорю было плавным, можно добавить свойство scroll
контейнеру, который будет прокручиваться. Чаще всего, это <body>
:
body { scroll-behavior: smooth;}
body { scroll-behavior: smooth; }
Обратите внимание, что уникальность id
важна, поскольку браузер рассчитывает, что на странице есть только один такой элемент и найдёт только первый по коду, а до второго не дойдёт. Расстановку таких id
лучше поручить шаблонизатору, он точно не ошибётся.
Например, генераторы статики умеют делать уникальный id
из содержимого заголовка:
<h3 id="unikalny-zagolovok"> Уникальный заголовок</h3>
<h3 id="unikalny-zagolovok"> Уникальный заголовок </h3>
Иногда перемещение по якорю прокручивает страницу впритык к целевому элементу, обрезая родительский контейнер. Это можно исправить, если поставить id
на родительский контейнер, либо с помощью свойства scroll
— оно добавит нужный отступ.
h3 { scroll-margin: 20px;}
h3 { scroll-margin: 20px; }
советует Скопировано
🛠 По умолчанию ссылка — строчный элемент. Поэтому, если нужно обернуть в неё целый блок, задайте для ссылки display
.
🛠 Ссылку нельзя вкладывать в ссылки 🤷♀️
🛠 Поскольку ссылка строчная, лучше вкладывать её в блочный элемент, а не наоборот. Для примера возьмём заголовок, который должен быть ссылкой.
<!-- Плохо --><a href="#"> <h2>Заголовок, он же ссылка</h2></a><!-- Хорошо --><h2> <a href="#">Заголовок, он же ссылка</a></h2>
<!-- Плохо --> <a href="#"> <h2>Заголовок, он же ссылка</h2> </a> <!-- Хорошо --> <h2> <a href="#">Заголовок, он же ссылка</a> </h2>
На собеседовании
СкопированоЭто вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.