<a>

Ссылки — это то, что делает интернет настоящей паутиной.

Время чтения: 5 мин

Кратко

Скопировано

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

Пример

Скопировано
        
          
          <a href="https://www.yandex.ru/">Яндекс</a>
          <a href="https://www.yandex.ru/">Яндекс</a>

        
        
          
        
      
Открыть демо в новой вкладке

Как понять

Скопировано

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

Пример ссылки с атрибутом и его значением

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

Как пишется

Скопировано
        
          
          <a href="URL">...</a>
          <a href="URL">...</a>

        
        
          
        
      

Атрибуты

Скопировано

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

href — обязательный атрибут, содержащий адрес, по которому перейдёт пользователь, нажав на ссылку. Это может быть либо URL-адрес, либо якорная ссылка #id. Якорная ссылка ведёт на элемент с таким же #id на этой странице. URL может вести не только на привычные страницы в интернете, но также на почту или телефон, например href="mailto:name@domain.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://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>

        
        
          
        
      
Открыть демо в новой вкладке

На практике

Скопировано

Вадим Макеев советует

Скопировано

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

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

  1. Добавить уникальный id="element" целевому элементу.
  2. Сослаться на него с помощью ссылки вида #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-behavior контейнеру, который будет прокручиваться. Чаще всего, это <body>:

        
          
          body {  scroll-behavior: smooth;}
          body {
  scroll-behavior: smooth;
}

        
        
          
        
      

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

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

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

        
        
          
        
      

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

        
          
          h3 {  scroll-margin: 20px;}
          h3 {
  scroll-margin: 20px;
}

        
        
          
        
      

Алёна Батицкая советует

Скопировано

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

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

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

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

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

        
        
          
        
      

На собеседовании

Скопировано
Задать вопрос в рубрику
🤚 Я знаю ответ

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.