HTML тег <a> — Learn HTML

Тег <a> используется для вставки гиперссылок на другие страницы, файлы, места на той же странице, адреса электронной почты или любой другой URL. В качестве гиперссылки можно использовать как текст, так и изображение.

В браузере гиперссылки отличаются внешним видом и цветом. По умолчанию ссылки HTML отображаются как синий подчёркнутый текст. Когда вы наводите курсор мыши на ссылку, она становится красной (активная ссылка). Ссылки, по которым уже щёлкнули (посещённые ссылки), становятся фиолетовыми.

Вы можете изменить цвет ссылок, убрать подчёркивание или изменить цвет ссылок, используя стили CSS.

Совет

Атрибуты "download", "media", "hreflang", "target", "rel" и "type" будут присутствовать только в том случае, если присутствует атрибут "href".

Совет

Пока не задан другой target, связанная страница отображается в текущем окне браузера.

Синтаксис

Тег <a> используется парно. Адрес назначения ссылки задаётся атрибутом href в открывающем теге, а кликабельное содержимое (текст или изображение) записывается между открывающим (<a>) и закрывающим (</a>) тегами.

<a href="https://www.w3docs.com/">Visit W3docs</a>

Текст "Visit W3docs" становится кликабельной гиперссылкой, и при нажатии на неё происходит переход по URL, указанному в href.

Атрибуты

Тег <a> может содержать атрибуты, предоставляющие о нём дополнительную информацию.

Атрибут href

Атрибут href является обязательным для тега <a>. Он определяет ссылку на веб-странице или место на той же веб-странице, куда пользователь переходит после щелчка по ссылке. Значением атрибута является либо якорь, либо URL. Якорь указывает на ID (уникальный идентификатор) части веб-страницы, на которую делается ссылка. Перед ID ставится решётка (#).

Это выглядит так:

HTML тег <a>

<a href="url">the link text</a>

<a href="#a">the link text</a>

Пример HTML тега `<a>` с атрибутом href:

Example of the HTML <a> Tag|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>

Попробуйте сами »

Результат

W3docs.com

Нажмите на ссылку, и вы будете перенаправлены на главную страницу нашего сайта.

Используя атрибут href тега <a> вместе с тегом <img>, можно создать ссылку из изображения.

Пример HTML тега `<a>` для создания ссылки из изображения:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        height: 90vh;
      }
    </style>
  </head>
  <body>
    <a href="https://en.wikipedia.org/wiki/France">
      <img src="https://images.unsplash.com/photo-1549144511-f099e773c147?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="France" />
    </a>
  </body>
</html>

Попробуйте сами »

Атрибут target

Атрибут target указывает браузеру, где открыть документ (по умолчанию ссылки открываются в текущем окне).

Атрибут target может принимать следующие значения:

_blank — открывает ссылку в новом окне или вкладке.
_self — открывает ссылку в текущем окне (значение по умолчанию).
_parent — открывает документ в родительском фрейме.
_top — открывает документ в полном теле окна.

Пример HTML тега `<a>` с атрибутом target:

Example of the HTML <a> Tag with a target attribute|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/" target="_blank">W3docs.com</a>
  </body>
</html>

Попробуйте сами »

Результат

W3docs.com

Безопасность при target="_blank": rel="noopener noreferrer"

Когда ссылка открывается в новой вкладке с помощью target="_blank", открытая страница в старых браузерах может получить доступ к вашей странице через свойство JavaScript window.opener. Вредоносная страница может использовать это для перенаправления исходной вкладки на фишинговый сайт — такая атака называется reverse tabnabbing.

Чтобы предотвратить это, добавьте rel="noopener noreferrer":

<a href="https://example.com/" target="_blank" rel="noopener noreferrer">
  External site
</a>

noopener — устанавливает window.opener в значение null в новой вкладке, так что страница назначения не может управлять страницей, которая её открыла, или ссылаться на неё.
noreferrer — выполняет то же, что noopener, и дополнительно запрещает браузеру отправлять заголовок Referer, поэтому страница назначения не узнает, с какой страницы перешёл посетитель.

Современные браузеры теперь автоматически подразумевают noopener для любой ссылки с target="_blank", однако хорошей практикой считается явное указание rel, чтобы защита работала и в старых браузерах и была видна в коде.

Атрибут rel

Этот атрибут задаёт отношение текущего документа к связанному документу. Значения атрибута могут быть следующими:

alternate — альтернативная версия документа.
author — ссылка на автора документа или статьи.
bookmark — постоянная ссылка, используемая для закладок.
nofollow — ссылка на неодобренный документ (это указывает поисковым системам, что краулер не должен переходить по этой ссылке).
noopener / noreferrer — значения безопасности, используемые вместе с target="_blank" (см. выше).

Значение nofollow

Если вы хотите создать ссылку nofollow, используйте rel="nofollow". Это сообщает поисковым системам, что вы не поддерживаете содержимое по другую сторону ссылки. Значение атрибута nofollow обычно используется в платных ссылках и рекламе. Иногда nofollow считается тегом или атрибутом, но на самом деле это значение атрибута rel.

Пример атрибута rel со значением "nofollow":

Example of the "rel" attribute with the "nofollow" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <p>This text is from <a href="https://www.lipsum.com/" rel="nofollow" target="_blank">Lorem Ipsum</a>.</p>
  </body>
</html>

Попробуйте сами »

Атрибут download

Атрибут download указывает браузеру загрузить связанный ресурс вместо перехода по ссылке. Он работает для ресурсов, расположенных на том же источнике (а также для URL с blob: и data:).

Если задать атрибуту значение, это значение станет предлагаемым именем файла при сохранении, независимо от имени файла на сервере. Если оставить атрибут пустым, браузер сохранит исходное имя файла.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <!-- Saves the file using its original name -->
    <a href="/files/report.pdf" download>Download the report</a>

    <!-- Saves the same file as "annual-report.pdf" -->
    <a href="/files/report.pdf" download="annual-report.pdf">
      Download the annual report
    </a>
  </body>
</html>

Ссылки на email и телефон: mailto: и tel:

Помимо обычных URL, атрибут href может содержать специальные схемы, открывающие почтовый клиент или приложение для звонков вместо веб-страницы.

Ссылка mailto: открывает почтовый клиент по умолчанию с предзаполненным адресом. Вы также можете добавить тему и тело письма с помощью параметров запроса:

<a href="mailto:[email protected]">Email us</a>

<a href="mailto:[email protected]?subject=Hello&body=I%20have%20a%20question">
  Email us about your question
</a>

Ссылка tel: предлагает устройству набрать номер, что особенно удобно на мобильных телефонах:

<a href="tel:+1234567890">Call us: +1 (234) 567-890</a>

Ссылка на раздел той же страницы (фрагменты)

Чтобы перейти к определённой части страницы, задайте в href символ решётки (#), за которым следует id целевого элемента. Такая ссылка называется фрагментной или якорной.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <!-- The link -->
    <a href="#section2">Go to Section 2</a>

    <h2 id="section1">Section 1</h2>
    <p>First section content...</p>

    <!-- The target: its id matches the href without the # -->
    <h2 id="section2">Section 2</h2>
    <p>Second section content...</p>
  </body>
</html>

Нажатие на ссылку прокручивает страницу до элемента, id которого совпадает со значением после #. Также можно сослаться на раздел другой страницы, объединив URL и фрагмент, например href="page.html#section2". Подробнее о формировании адресов ссылок читайте в разделе HTML URL.

Атрибут hreflang

Атрибут hreflang указывает язык документа, на который ведёт ссылка (например, hreflang="es" для испанской страницы). Он носит исключительно информационный характер — используется поисковыми системами и вспомогательными технологиями — и не изменяет текущую страницу. Это отличается от глобального атрибута lang, который объявляет язык элемента, на котором он размещён.

<a href="https://es.example.com/" hreflang="es">Versión en español</a>

Доступность: пишите информативный текст ссылки

Пользователи программ чтения с экрана часто перемещаются, переходя от ссылки к ссылке, слыша только текст ссылки вне контекста. Общие фразы вроде «нажмите здесь» или «читать далее» ничего не говорят им о назначении. Всегда формулируйте текст ссылки так, чтобы он описывал, куда она ведёт.

<!-- Avoid -->
<p>To read our pricing, <a href="/pricing">click here</a>.</p>

<!-- Better: the link text is meaningful on its own -->
<p>Read about <a href="/pricing">our pricing plans</a>.</p>

Подробнее о лучших практиках работы со ссылками читайте в разделе HTML Links.

Атрибуты

Атрибут	Значение	Описание
charset	char_encoding	Определяет кодировку символов связанного документа. Не используется в HTML5.
coords	coordinates	Определяет координаты ссылки. Не используется в HTML5.
download	filename	Определяет, что целевой файл будет загружен при щелчке по гиперссылке.
href	URL	Определяет URL связанного документа.
hreflang	language_code	Определяет язык связанного документа.
media	media_query	Определяет, для какого носителя/устройства оптимизирован связанный документ.
name	section_name	Определяет имя якоря. Не используется в HTML5.
ping	list_of_URLs	Определяет разделённый пробелами список URL, на которые при переходе по ссылке браузер отправит POST-запросы с телом ping (в фоновом режиме). Обычно используется для отслеживания.
rel	alternate author bookmark external help license next nofollow noreferrer noopener prev search tag	Определяет отношение между целевым объектом и связанным документом.
rev	text	Определяет обратную ссылку, обратное отношение атрибута "rel". Не используется в HTML5.
shape	default rect circle poly	Определяет форму гиперссылки. Не используется в HTML5.
target	_blank _parent _self _top	Определяет, где открыть связанный документ.
type	media_type	Определяет тип носителя в виде MIME- type для связанного URL.

Тег <a> также поддерживает Глобальные атрибуты и Атрибуты событий.

Как стилизовать HTML тег `<a>`

Ссылки имеют четыре состояния, которые можно стилизовать отдельно с помощью псевдоклассов CSS. Чтобы всё работало корректно, их необходимо записывать в следующем порядке: :link, :visited, :hover, :active (запомнить поможет мнемоника "LoVe HAte").

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link { color: #1a73e8; }            /* unvisited link */
      a:visited { color: #6f42c1; }         /* visited link */
      a:hover { text-decoration: none; }    /* on mouse-over */
      a:active { color: #d93025; }          /* on click */
    </style>
  </head>
  <body>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>

Вы также можете убрать подчёркивание или изменить цвет ссылок с помощью CSS.

Практика

Какой атрибут тега a является обязательным и определяет, куда ведёт ссылка? (Выберите все подходящие варианты)

Атрибут 'href' является обязательным и содержит адрес назначения ссылки.Атрибут 'target' является обязательным для каждой ссылки.Атрибут 'download' необходим, чтобы ссылка была кликабельной.Без 'href' атрибуты 'target', 'rel', 'download' и 'hreflang' не имеют эффекта.Атрибут 'src' определяет URL связанной страницы.

Синтаксис

Атрибуты

Атрибут href

Пример HTML тега <a> с атрибутом href:

Результат

Пример HTML тега <a> для создания ссылки из изображения:

Атрибут target

Пример HTML тега <a> с атрибутом target:

Результат

Безопасность при target="_blank": rel="noopener noreferrer"

Атрибут rel

Значение nofollow

Пример атрибута rel со значением "nofollow":

Атрибут download

Ссылки на email и телефон: mailto: и tel:

Ссылка на раздел той же страницы (фрагменты)

Атрибут hreflang

Доступность: пишите информативный текст ссылки

Атрибуты

Как стилизовать HTML тег <a>

Практика

Пример HTML тега `<a>` с атрибутом href:

Пример HTML тега `<a>` для создания ссылки из изображения:

Пример HTML тега `<a>` с атрибутом target:

Как стилизовать HTML тег `<a>`