HTML тег <a>

Значение и применение

Гиперссылки (или просто "ссылки") определяются тегом <a> (HTML Anchor Element).

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

Ссылка служит переходу по адресу; для действия на странице используйте <button>. Название должно объяснять назначение ссылки. Внутри ссылки нельзя размещать другую ссылку или интерактивный элемент. target="_blank" открывает новый контекст — обычно вкладку, иногда окно; современный HTML подразумевает поведение noopener. При необходимости его можно явно указать через rel="noopener".

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (12) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьhtml.elements.a
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
a✓1✓12✓1

Версия 1 выпущена в 2004 г.

Примечание MDN (англ.)

Starting with Firefox 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).

✓15✓1✓18✓4

Версия 4 выпущена в 2011 г.

Примечание MDN (англ.)

Starting with Firefox for Android 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).

✓14✓1✓1.0✓4.4✓1
attributionsourceid××××✓14.1×××✓14.5××✓14.5
attributionsrc✓125✓125×✓111×✓125×✓83×✓27.0✓125×
charset✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
coords✓1✓79×

Версия 1 выпущена в 2004 г. — Удалено в 58

Примечание MDN (англ.)

You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.

✓15✓1✓18×

Версия 4 выпущена в 2011 г. — Удалено в 58

Примечание MDN (англ.)

You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.

✓14✓1✓1.0✓4.4✓1
download✓14

Версия 14 выпущена в 2011 г.

Примечание MDN (англ.)

Starting in Chrome 65, cross-origin downloads are not supported on the <a> element.

✓18

Версия 18 выпущена в 2018 г.

Примечание MDN (англ.)

Starting in Edge 79, cross-origin downloads are not supported on the <a> element.

Версия 13 выпущена в 2015 г. — Удалено в 18; Частичная поддержка

Примечание MDN (англ.)

Until Edge 14 (build 14357), attempting to download data URIs caused Edge to crash (bug 7160092).

Edge 17 or older didn't follow the attributes' value to determine filename (bug 7260192).

✓20✓15

Версия 15 выпущена в 2013 г.

Примечание MDN (англ.)

Starting in Opera 52, cross-origin downloads are not supported on the <a> element.

✓10.1✓18

Версия 18 выпущена в 2012 г.

Примечание MDN (англ.)

Starting in Chrome Android 65, cross-origin downloads are not supported on the <a> element.

✓20

Версия 20 выпущена в 2013 г.

Примечание MDN (англ.)

The attribute's filename value only affects the suggested file name for the blob: and data: URI schemes. Other schemes ignore the suggested filename. See bug 1845642.

✓14

Версия 14 выпущена в 2013 г.

Примечание MDN (англ.)

Starting in Opera Android 47, cross-origin downloads are not supported on the <a> element.

✓13✓1.0

Версия 1.0 выпущена в 2013 г.

Примечание MDN (англ.)

Starting in Samsung Browser 9.0, cross-origin downloads are not supported on the <a> element.

✓4.4

Версия 4.4 выпущена в 2013 г.

Примечание MDN (англ.)

Starting in WebView Android 65, cross-origin downloads are not supported on the <a> element.

✓13
href✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
href = 'sms:'××✓12×××✓14×××××
href = '#top'✓1✓12✓10✓15✓≤4✓18✓10✓14✓≤3.2✓1.0✓4.4✓≤3.2
hreflang✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
hreftranslate✓81××✓68×✓81×✓58×✓13.0✓81×
target="_blank" implies rel="noopener" behavior✓88✓88✓79✓74✓12.1✓88✓79✓63✓12.2✓15.0✓88✓12.2
interestfor✓142✓142×✓126×✓142×✓93×✓30.0✓142×
name✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
ping✓12✓17◐1

Версия 1 выпущена в 2004 г. — Частичная поддержка

Примечание MDN (англ.)

This property is exposed but has no effect if the browser.send_pings preference is not set to true. See bug 951104.

✓15✓6✓18◐4

Версия 4 выпущена в 2011 г. — Частичная поддержка

Примечание MDN (англ.)

This property is exposed but has no effect if the browser.send_pings preference is not set to true. See bug 951104.

✓14✓6✓1.0✓4.4✓6
referrerpolicy✓51✓79✓50✓38✓14✓51✓50✓41✓14✓7.2✓51✓14
no-referrer-when-downgrade✓51✓79×

Версия 50 выпущена в 2016 г. — Удалено в 92

✓38×✓51×

Версия 50 выпущена в 2016 г. — Удалено в 92

✓41×✓7.2✓51×
origin-when-cross-origin✓51✓79×

Версия 50 выпущена в 2016 г. — Удалено в 92

✓38×✓51×

Версия 50 выпущена в 2016 г. — Удалено в 92

✓41×✓7.2✓51×
unsafe-url✓51✓79×

Версия 50 выпущена в 2016 г. — Удалено в 92

✓38×✓51×

Версия 50 выпущена в 2016 г. — Удалено в 92

✓41×✓7.2✓51×
rel✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
noopener✓49✓79✓52

Версия 52 выпущена в 2017 г.

Примечание MDN (англ.)

Before Firefox 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.

✓36✓10.1✓49✓52

Версия 52 выпущена в 2017 г.

Примечание MDN (англ.)

Before Firefox for Android 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox for Android 63, these windows have the same features enabled by default as any other window.

✓36✓10.3✓5.0✓49✓10.3
noreferrer✓16✓13✓33✓15✓5✓18✓33✓14✓4.2✓1.5✓4.4✓4.2
rev✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
shape✓1✓79×

Версия 1 выпущена в 2004 г. — Удалено в 58

Примечание MDN (англ.)

You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.

✓15✓1✓18×

Версия 4 выпущена в 2011 г. — Удалено в 58

Примечание MDN (англ.)

You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.

✓14✓1✓1.0✓4.4✓1
target✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
unfencedTop✓126✓126×✓112×✓126×✓83×✓28.0✓126×
URL text fragments✓80✓80✓131✓67✓16.1✓80✓131✓57✓16.1✓13.0✓80✓16.1
type✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут Значение Описание
charset char_encoding Не поддерживается в HTML5.
Определяет кодировку, связанного документа.
coords coordinates Не поддерживается в HTML5.
Определяет координаты ссылки.
download filename Просит скачать ресурс; имя файла — рекомендация. Обычно действует для того же источника, blob: и data:, а ответ сервера влияет на результат.
href URL Задает URL страницы, или документа на которую ведёт ссылка.
hreflang language_code Определяет язык связанного документа на который ведёт ссылка.
media media_query Исторический атрибут: в современном HTML для <a> не предусмотрен.
name section_name Не поддерживается в HTML5.
Задает имя якоря. Вместо этого атрибута используйте глобальный атрибут id.
rel alternate | author | bookmark | external | help | license | next | nofollow | noopener | noreferrer | opener | prev | search | tag Отношения к целевому документу; токены записываются через пробел. Например, noopener изолирует окно, noreferrer также запрещает передачу Referer. Список значений здесь не исчерпывающий.
rev text Не поддерживается в HTML5.
Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
shape default
rect
circle
poly 		Не поддерживается в HTML5.
Определяет форму ссылки (использовался с атрибутом coords). Используйте вместо данного тега элемент <area>.
target _blank
_parent
_self
_top
framename 		Указывает, где открыть документ.
type media_type Указывает MIME-тип документа на который осуществляется переход.
ping URL через пробел Адреса уведомлений о переходе по ссылке. Браузер может отключать такие запросы.
referrerpolicy Политика Referer Определяет, какую информацию об адресе исходной страницы передавать при переходе.

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

Ссылки и фрагменты

Измените href. Для переходов откройте скачанный HTML: в предпросмотре ссылки отключены.

index.html
HTML
<p><a href="https://example.com/">Внешняя страница</a></p>
<p><a href="#section">Раздел документа</a></p>
<h2 id="section">Раздел</h2>

Относительные и абсолютные пути ссылок

В приведенном выше примере используется абсолютный адрес пути. Название абсолютный связано с тем, что мы задаем полный веб-адрес страницы в качестве пути к файлу. Ниже приведены примеры указания абсолютных путей:

HTML
<a href = "https://www.yandex.ru">Содержимое элемента</a> <!-- указываем полный путь (протокол https) -->
<a href = "http://www.yandex.ru">Содержимое элемента</a> <!-- указываем полный путь (протокол http) -->
<a href = "//www.yandex.ru">Содержимое элемента</a> <!-- допускается указывать полный путь без протокола -->

Обращаю Ваше внимание, что в большинстве случаев, абсолютные пути ссылок применяются для страниц или файлов, которые находятся на других ресурсах (распологаются не на том же сервере, что и страница с которой ссылаются).

Путь относительно текущего документа

Предлагаю для начала разобраться с путями относительно текущего HTML документа. Независимо в каких дебрях находится файл, путь вы будете задавать относительно этого файла.

Файлы в одной папке
Код
site/
├── index.html  ← текущая страница
├── image.png
└── page.html

Из index.html: image.png и page.html.

Пример подключения файлов:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Пример подключения файлов к HTML документу из той же папки</title>
  </head>
  <body>
    <img src="image.png" alt="someimage info" />
    <!-- размещаем изображение -->
    <a href="page.html">Содержимое элемента</a>
    <!-- ссылаемся на страницу -->
  </body>
</html>

Перейдем к следующему примеру, допустим у нас есть файл index.html, в этом же каталоге есть папка (каталог) с именем etc из которой нам необходимо подключить изображение и сделать ссылку на документ page.html:

Файлы в дочерней папке
Код
site/
├── index.html  ← текущая страница
└── etc/
    ├── image.png
    └── page.html

Из index.html: etc/image.png и etc/page.html.

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Пример подключения файлов из дочернего каталога</title>
  </head>
  <body>
    <img src="etc/image.png" alt="someimage info" />
    <!-- размещаем изображение из дочернего каталога -->
    <a href="etc/page.html">Содержимое элемента</a>
    <!-- ссылаемся на страницу, из дочернего каталога -->
  </body>
</html>

Обратите внимание, как мы указываем путь к нашим файлам - мы задаем название каталога и через прямой слеш указываем название необходимого нам файла. Данный каталог является по отношению к текущему каталогу дочерним и чтобы подключить необходимые файлы мы спускаемся на один уровень ниже (название_каталога/необходимый_файл).

Ну и заключительный пример, в котором нам необходимо подключить к нашей странице изображение, которое находится в каталоге, который расположен на два уровня выше текущей страницы и необходимо добавить ссылку, которая находится на один уровень выше текущей страницы:

Файлы в родительских папках
Код
site/
├── image.png
└── pages/
    ├── page.html
    └── details/
        └── index.html  ← текущая страница

Из details/index.html: ../../image.png и ../page.html. Каждое ../ поднимает на один уровень.

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Пример подключения файлов из родительского каталога</title>
  </head>
  <body>
    <img src="../../image.png" alt="someimage info" />
    <!-- размещаем изображение, которое находится на 2 уровня выше -->
    <a href="../page.html">Содержимое элемента</a>
    <!-- ссылаемся на страницу, которая находится на 1 уровень выше -->
  </body>
</html>

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

Путь относительно корня сайта

Чтобы проверить адрес от корня сайта, например /images/photo.jpg, откройте документ через локальный HTTP-сервер. При открытии файла напрямую корень относится к файловому URL и даёт другой результат. Обычные относительные пути могут работать и без сервера.

Перейдем к следующему примеру, в котором нам необходимо подключить файлы, которые находятся на веб-сервере. На примере куска этого сайта, подключим из папок primer по одному изображению и одному html файлу:

Пути от корня сайта
Код
/  ← корень сайта
├── index.html
├── html/
│   └── primer/
│       ├── anyimage.png
│       └── anypage.html
└── css/
    └── primer/
        ├── anyimage.png
        └── anypage.html

Начальный / означает корень сайта. Например, /html/primer/anypage.html не зависит от папки текущей страницы.

Как и при использовании абсолютных адесов, способ задавать путь относительно корня сайта довольно-таки прост. Разница заключается лишь в том, что у нас отпадает необходимость указывать имя домена, ну и соответственно относительные пути используются только в рамках одного сервера.

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Пример подключения файлов относительно корня сайта</title>
  </head>
  <body>
    <img src="/html/primer/anyimage.png" alt="someimage info" />
    <!-- размещаем изображение, которое находится на 2 уровня ниже относительно корня сайта -->
    <a href="/html/primer/anypage.html">Содержимое элемента</a>
    <!-- ссылаемся на страницу, которая находится на 2 уровня ниже относительно корня сайта -->
    <img src="/css/primer/anyimage.png" alt="someimage info" />
    <!-- размещаем изображение, которое находится на 2 уровня ниже относительно корня сайта -->
    <a href="/css/primer/anypage.html">Содержимое элемента</a>
    <!-- ссылаемся на страницу, которая находится на 2 уровня ниже относительно корня сайта -->
  </body>
</html>

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

Атрибут target

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

HTML
<a href="http://yandex.ru" target="_blank">Поиск </a>

Ниже представлены все значения этого атрибута:

Атрибут Значение
_blank Открывает страницу в новой вкладке или окне в зависимости от настроек браузера.
_self Загружает страницу в текущее окно. Это значение по умолчанию.
_parent Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.
framename Открывает ссылку в указанном фрейме.

Работа с фреймами будет рассмотрена позднее в статье учебника "HTML фреймы".

Схема mailto

Схема mailto: в значении href открывает почтовое приложение для составления письма. Это не отдельный HTML-атрибут и не автоматическая отправка письма:

HTML
<a href = "mailto:smbd@some.com">Написать автору</a>

Для того, чтобы ссылки mailto корректно работали необходимо чтобы на компьютере или в браузере посетителя был настроен почтовый / веб клиент по умолчанию, иначе при клике на ссылку ничего не произойдет.

В значении атрибута можно сразу указать значения для заголовков (тема, копии, тело письма и т.п.). Пробелы и переносы строки нельзя вставить без кодирования:

HTML
<a href = "mailto:mail_1@some.com?subject=Тема%20моего%20письма&cc=mail2@some.com&body=
Здравствуй%20уважаемый%20автор">Написать автору</a>

Где:

  • subject—тема письма.
  • cc—копия письма.
  • bcc—скрытая копия письма.
  • body—тело письма.

Допустимо указывать несколько адресов (либо не указывать вовсе):

HTML
<a href="mailto:mail_1@some.com,mail_2@some.com">Написать автору </a>

Изображение как ссылка

Для того, чтобы использовать изображение в качестве ссылки, вам необходимо поместить изображение между тегами <a> </a>:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Использование изображения в качестве ссылки</title>
  </head>
  <body>
    <a href="http://yandex.ru">
      <img src="search-link.svg" alt="Поиск в Яндекс" />
      <!-- размещаем изображение в качестве содержимого гиперссылки -->
    </a>
  </body>
</html>

При этом при клике на картинку будет осуществлён переход по указанной ссылке:

Перейти к поиску в Яндексе

Размещение файлов на сайте для скачивания

С выходом HTML 5 тег <a> обзавелся таким новым атрибутом как download, он сообщает браузеру пользователя, что необходимо скачать документ, указанный в адресе ссылки, а не переходить по ней.

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Пример использования атрибута download</title>
  </head>
  <body>
    <a href="/path/to/file.mp3" download>Любимая песня</a>
    <!-- указываем файл, который предназначается для скачивания -->
  </body>
</html>

download поддерживается современными браузерами, но его действие ограничено политиками браузера и источником файла.

Для ресурса своего источника можно указать download. Для серверной выдачи скачиваемого файла используют HTTP-заголовок Content-Disposition: attachment. Архивировать текстовый файл ради скачивания необязательно.

Отличия HTML 4.01 от HTML 5

В HTML 4.01 элемент мог быть как гиперссылкой, так и якорем, а в HTML5 элемент всегда гиперссылка (в случае отсутствия атрибута href является контейнером для гиперссылки). В HTML5 добавлено два новых атрибута и пять удалено.

Значение CSS по умолчанию

CSS
a:link, a:visited {
color: (internal value); /* в зависимости от браузера пользователя */ 
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);  /* в зависимости от браузера пользователя */ 
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".