Перейти к содержанию

<a>

Тег <a> (от англ. anchor - якорь, ссылка) предназначен для создания ссылок.

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

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

Синтаксис

<a
    download="имя файла"
    href="адрес"
    hreflang="код языка"
    rel="отношение"
    target="целевое окно"
    type="MIME-тип">
  ...
</a>

Закрывающий тег обязателен.

Атрибуты

download
Предлагает скачать указанный по ссылке файл.
href
Задаёт адрес документа, на который следует перейти.
hreflang
Идентифицирует язык текста по ссылке.
ping
Этот атрибут уведомляет указанные в нём URL, что пользователь перешёл по ссылке.
rel
Отношения между ссылаемым и текущим документами.
target
Имя окна или фрейма, куда браузер будет загружать документ.
type
Указывает MIME-тип документа, на который ведёт ссылка.

Также для этого элемента доступны универсальные атрибуты.

download

При наличии атрибута download (от англ. download - скачать) браузер не переходит по ссылке, а предложит скачать документ, указанный в адресе ссылки.

Синтаксис

<a download>Ссылка</a> <a download="<текст>">Ссылка</a>

Значения

Если атрибут download пишется без значения, то файл скачивается и сохраняется под своим исходным именем, как оно написано на сервере. В качестве значения можно указать рекомендуемое имя файла для сохранения на диск пользователя. При этом файл будет скачан и сохранён с именем, указанным в значении download. Расширение файла при этом останется исходным.

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

По умолчанию этот атрибут выключен.

href

Атрибут href (от англ. hypertext reference - гипертекстовая ссылка) задаёт адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью атрибута target.

Синтаксис

<a href="<адрес>">...</a>

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

Нет.

hreflang

Атрибут hreflang (от англ. hypertext reference language - язык гипертекстовой ссылки) указывает язык документа, на который ведёт ссылка.

Синтаксис

<a hreflang="<язык>">...</a>

Значения

Код языка

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

Нет.

Примечание

Атрибут можно использовать для стилизации ссылок, ведущих на иностранные ресурсы.

rel

Атрибут rel (от англ. relation - связь, отношение) определяет отношения между текущим документом и документом, на который ведёт ссылка, заданная атрибутом href. Несмотря на то, что большинство браузеров не поддерживают атрибут rel, на сайтах часто можно встретить код rel="nofollow", предназначенный для поисковых систем Google и Яндекс. Ссылки, помеченные таким образом, не передают PageRank и ТИЦ.

Синтаксис

<a rel="текст">...</a>

Значения

  • alternate -- Даёт альтернативные представления текущего документа.
  • author -- Указывает ссылку на автора текущего документа или статьи.
  • bookmark -- Постоянная ссылка на ближайший родительский раздел.
  • help -- Ссылка на контекстно-зависимую справку.
  • icon -- Импортирует иконку для представления текущего документа.
  • license -- Указывает, что основное содержание текущего документа распространяется по лицензии, описанной в указанном документе.
  • next -- Указывает, что текущий документ является частью серии и ссылка ведёт на следующий документ в серии.
  • nofollow -- Не передавать по ссылке ТИЦ и PR.
  • noreferrer -- Требует, чтобы пользовательский агент не посылал в HTTP-заголовке Referer, если пользователь переходит по ссылке.
  • prefetch -- Указывает, что целевой ресурс должен быть заранее кэширован.
  • prev -- Указывает, что текущий документ является частью серии и ссылка ведёт на предыдущий документ в серии.
  • search -- Даёт ссылку на ресурс, который может быть использован для поиска по текущему документу и связанных с ней страниц.
  • stylesheet -- Импортирует таблицу стилей.
  • tag -- Указывает, что метка (тег) имеет отношение к текущему документу.

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

Нет.

target

По умолчанию, при переходе по ссылке документ открывается в текущей вкладке браузера. Это поведение можно изменить с помощью атрибута target (от англ. target - цель) элемента <a>. В качестве значения используется имя фрейма, заданное атрибутом name элемента <iframe>, или зарезервированное ключевое слово. При указании имени фрейма ссылка будет открываться во фрейме.

Синтаксис

<a target="...">...</a>

Значения

В качестве значения используется имя фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыта новая вкладка браузера. В качестве зарезервированных имен используются следующие.

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

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

_self

type

Атрибут type (от англ. type - тип) устанавливает MIME-тип документа, на который указывает ссылка. Этот атрибут носит рекомендательный характер и может использоваться для стилизации ссылок с заданным типом документа. Атрибут type должен добавляться только при наличии атрибута href.

Синтаксис

<a href="<адрес>" type="<MIME-тип>">...</a>

Значения

MIME-тип

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

Нет.

Спецификации

Описание и примеры

Пример со ссылкой:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>А</title>
  </head>
  <body>
    <p><a href="image/xxx.jpg">Посмотрите на мою фотографию!</a></p>
    <p><a href="page/tip.html">Как сделать такое же фото?</a></p>
  </body>
</html>

Результат:

Пример с якорем:

<!DOCTYPE html>
<html>
  <head>
    <title>anchor</title>
    <style>
      #anchor {
        margin-top: 999px;
      }
    </style>
  </head>
  <body>
    <a href="#anchor">Go to anchor</a>
    <div id="anchor">Anchor</div>
  </body>
</html>

Результат:

Создания ссылки для написания письма

<a href="mailto:[email protected]">Отправить сообщение в никуда</a>

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

Создание ссылки с номером телефона

С телефонами, способными выходить в Интернет и ноутбуками, которые привязаны к телефонам, ссылки с номером телефона становятся всё больше и больше полезными.

<a href="tel:+491570156">+49 157 0156</a>

Для дополнительных деталей о протоколе tel, смотрите RFC 2806 и RFC 2396.