/ ↲
    Расширенный поиск

    HTML

    <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

    💡 Ссылка не всегда по умолчанию является строчным элементом. Если ссылка вложена во флекс- или грид-контейнер, то браузер определит её значение display как block. Таким ссылкам можно свободно задать ширину, высоту, а также padding-top и padding-bottom (или их логические аналоги). Если у ссылки блочный или строчный родитель, то эти свойства корректно работать не будут, так как значением её display останется inline. Нужно будет явно задавать иное значение display, чтобы изменить стандартное поведение.

    Ещё примеры

    Скопировано

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

            
          
          <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.

    🛠 Ссылку нельзя вкладывать в ссылки 🤷‍♀️ Также в ссылку не обернуть другие интерактивные элементы (включая <button>, <details>, <label>) или элементы, содержащие tabindex. При этом спецификация разрешает вкладывать в ссылку абзацы, списки, таблицы и даже целые секции, если в них нет никакого собственного интерактивного содержимого.

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

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

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

    Ольга Ветер советует

    Скопировано

    🛠 Иногда нам всё же может понадобиться «отключить» ссылку. На это должна быть веская причина: необходимость создать временную «заглушку», требование специалиста по продвижению сайта и так далее. Если речь идёт о ссылке на текущую страницу и у нас нет нужды её блокировать, то достаточно будет использовать aria-current="page".

    Что нужно сделать, если ссылку нужно заблокировать?

    Лучше всего убрать атрибут href, это разрешается спецификацией. Такая ссылка уже будет вести себя как «заглушка» и не будет интерактивной: то есть не появится контекстное меню по правому клику, не изменится вид курсора при наведении, не возникнет фокус при работе с клавиатуры.

            
          
          <a>Текст ссылки</a>
          <a>Текст ссылки</a>

    Роль этого элемента уже не будет восприниматься устройствами как link. Это не совсем корректно с точки зрения семантики и хорошо будет показать, что это именно ссылка, и что мы её отключаем умышленно, а не по ошибке. Явно определить роль поможет атрибут role="link" (ссылка без href эту роль теряет). Обозначить ссылку как отключённую нам поможет атрибут aria-disabled="true".

            
          
          <a role="link" aria-disabled="true">Текст ссылки</a>
          <a role="link" aria-disabled="true">Текст ссылки</a>

    Если мы знаем, что такие заблокированные ссылки-«заглушки» на нашем сайте есть или могут возникнуть, то рекомендуется и состояния (например :hover) прописывать с учётом наличия href, чтобы у заблокированных ссылок каких-либо спецэффектов интерактивного элемента не возникало. Например так:

            
          
          a[href]:hover {  background-color: #FF8630;}
          a[href]:hover {
  background-color: #FF8630;
}

    Ссылка, лишённая атрибута href, этого изменения фона по наведению курсора не получит.

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

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

    Александр Ламков  отвечает

    Скопировано

    Ощутимая разница между ссылками и кнопками в том, что «активация» элемента при фокусе с клавиатуры происходит по-разному. Для ссылок — клавишей Enter, а для кнопок — пробелом или Enter. Пользователь, привыкший перемещаться по интерфейсу сайта и взаимодействовать с ним с клавиатуры, получит неожиданное поведение при попытке взаимодействия с ложной ссылкой или кнопкой.

    Чтобы определить, какой тег использовать, ссылку или кнопку, нужно подумать про ожидаемое поведение при взаимодействии с элементом. Если при нажатии на элемент подразумевается переход на другую страницу, то в коде элемент нужно сделать тегом <a>, то есть ссылкой. Если при нажатии произойдёт действие в рамках текущей страницы, например, откроется модальное окно с формой входа, то такой элемент нужно сделать тегом <button>.

    С точки зрения доступности у ссылок и кнопок разные роли. У ссылок — link, у кнопок — button. Скринридер перед озвучиванием содержимого элемента произносит его роль. Если используете неправильные теги, роли перемешаются и это запутает пользователей скринридеров.

    Читайте также