skip to main content

<a>

html

Кратко 🔗

Преврати любой объект в ссылку с помощью тега <a>.

Пример 🔗

<a href="https://www.yandex.ru/">Яндекс</a>

Как это понять 🔗

Размести текст, картинку или другой элемент внутри тега <a>, чтобы сделать его ссылкой. Ссылка может вести на любую страницу, файл, email или телефон. Для этого пропиши обязательный атрибут href="URL", где URL — любой адрес.

Пример использования тега a с атрибутом и его значением

Бывает, что ссылка ведёт не на другую страницу, а на раздел внутри текущей страницы. Тогда такая ссылка называется якорной или просто «якорь». Чтобы её создать, вместо URL укажи идентификатор #id элемента, к которому должна вести ссылка. Например, <a href="#glava1">Глава 1</a>. Идентификатор можно задать для любого тега, то есть «бросить якорь» в любую часть страницы.

Как пишется 🔗

<a href="URL">...</a>

Атрибуты 🔗

download — если кликнуть по такой ссылке, браузер предложит пользователю скачать то, что по ней находится. Это может быть файл или другая страница — главное, чтобы они находились на том же домене, что и ссылка. Можно задать название скачиваемому файлу, если добавите значение атрибуту. Например, <a href="/?z=484c08ca" download="фотки.zip"> предложит скачать файл с названием фотки.zip. Пользователь сможет изменить название при скачивании.

href — обязательный атрибут, который содержит адрес, по которому перейдёт пользователь, нажав ссылку. Это может быть либо URL-адрес, либо якорная ссылка #id. Якорная ссылка ведёт на элемент с таким же #id на этой странице. URL может вести не только на привычные страницы в интернете, но также на почту или телефон, например href="mailto:m.bluth@example.com или href="tel:+70001234567. Для этого добавь в значение атрибута один из протоколов, вроде file:, mailto: или tel:.

hreflang — указывает язык документа, на который ведёт ссылка. Этот атрибут нужен, только если у вашей страницы есть версия на другом языке. hreflang помогает поисковикам выдавать версию на нужном языке, в зависимости от того, в какой стране находится пользователь.

ping — этот коварный атрибут «палит», что пользователи перешли по ссылке, тем URL-адресам, которые в нём указаны.

rel — определяет отношение между страницей, где находится ссылка и страницей или файлом, куда она ведёт. Обычно это очень техническая информация, которая нужна браузерам и разработчикам, чтобы определять, что находится по ссылке, и в некоторых случаях, какое действие нужно выполнить сайту, который открывается по ссылке.

target — определяет, где откроется ссылка: в том же окне, на новой вкладке или в новом окне браузера. Без этого атрибута содержимое ссылки откроется в той же вкладке. Вот все варианты, где можно открыть URL-ссылку:

  • _self: в той же странице. Значение по умолчанию, если именно оно вам нужно, то можно не указывать этот атрибут.
  • _blank: в новой вкладке или в новом окне браузера — это зависит от настроек браузера, но чаще всего это именно вкладка.
  • _parent: в родительской странице от текущей, то есть уровнем вложенности выше. Например, если на страницу вставлен фрейм, а внутри него такая ссылка, то она откроется не внутри фрейма, а на той странице, куда вставлен этот фрейм. Если родительской страницы нет, то ссылка откроется вместо текущей страницы.
  • _top: в самой высокой «корневой» странице. Например, если есть страница, куда вставлен фрейм, в который вставлен фрейм, в котором ссылка c target="_top", то ссылка откроется в самой-самой верхней странице, насколько глубоко она бы ни находилась.

Используй этот атрибут только, если указан href.

💡 Вместе с атрибутом target обязательно используй rel="noopener noreferrer", чтобы в момент открытия внешние сайты не узнали лишнего про текущую страницу.

  • type — определяет, к какому типу относится документ по ссылке. Речь идёт о типах по стандарту MIME. Это чисто техническая информация, но её можно указать, чтобы применить общий стиль к ссылкам одного типа.
  • title — это глобальный атрибут, который можно использовать и для ссылок. Он содержит текст, который будет виден при наведении на ссылку.

Подсказки 🔗

💡 Чтобы отправить пользователя на верх страницы, используй href="#top" или href="#".

💡 Обязательно указывай атрибут href для ссылок, без него она неотличима от <span> и перестаёт иметь смысл. Спецификация HTML допускает «логические» ссылки без href для текущих или будущих ссылок, но практической пользы в этом мало.

💡 Якорная ссылка может также вести и на нужный раздел внешней страницы. Для этого используй URL-ссылку, а в конце добавь id якоря после знака #. Например: https://yoursite.com/how-to-make-cookies#alternative-recipe

Ещё примеры 🔗

Сделаем так, чтобы ссылка открывалась в новой вкладке браузера:

<a href="https://y-doka.site/" target="_blank">
<img src="dogs.png" alt="doka mainpage dog" />
</a>

Сделаем ссылку для отправки письма на почту:

<a href="mailto:nowhere@yandex.ru">Отправить сообщение в никуда</a>

В работе 🔗

Алёна,

🛠 По умолчанию ссылка является строчным элементом. Поэтому, если нужно обернуть в неё целый блок, то задай для ссылки display: block.

🛠 Ссылку нельзя вкладывать в ссылки 🤷‍♀️

🛠 Поскольку ссылка строчная, лучше вкладывать её в блочный элемент, а не наоборот. Для примера возьмём заголовок, который должен быть ссылкой.

HTML

<!-- Плохо -->
<a href="#">
<h2>Заголовок, он же ссылка</h2>
</a>

<!-- Хорошо -->
<h2>
<a href="#">Заголовок, он же ссылка</a>
</h2>

Вадим,

🛠 Когда нужно сделать навигацию в пределах одной страницы, например, оглавление, удобно использовать якоря — то есть ссылки на отдельные элементы. При нажатии на ссылку, браузер мгновенно переместится к этому элементу.

Чтобы создать такую ссылку нужно две вещи:

  1. Добавить уникальный id="element" целевому элементу.
  2. Сослаться на него с помощью ссылки вида #element.
<a href="#section-1">
Фотографии пёсиков
</a>

<section id="section-1">
<h3>Фотографии пёсиков</h3>
</h3>

Чтобы перемещение по якорю было плавным, можно добавить свойство scroll-behavior контейнеру, который будет прокручиваться. Чаще всего, это <body>:

body {
scroll-behavior: smooth;
}

Обратите внимание, что уникальность id важна, поскольку браузер рассчитывает, что на странице есть только один такой элемент и найдёт только первый по коду, а до второго не дойдёт. Расстановку таких id лучше поручить шаблонизатору, он точно не ошибётся.

Например, генераторы статики умеют делать уникальный id из содержимого заголовка:

<h3 id="unikalny-zagolovok">
Уникальный заголовок
</h3>

Иногда перемещение по якорю прокручивает страницу впритык к целевому элементу, обрезая родительский контейнер. Это можно исправить, если поставить id на родительский контейнер, либо с помощью свойства scroll-margin — оно добавит нужный отступ.

h3 {
scroll-margin: 20px;
}

Автор: Макс 👨‍🔧