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

<a>

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

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

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

Демо

Текстовые элементы

Синтаксис

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

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

Атрибуты

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

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

download

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

Синтаксис

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

Значения

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

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

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

href

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

Синтаксис

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

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

Нет.

hreflang

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

Синтаксис

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

Значения

Код языка

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

Нет.

Примечание

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

referrerpolicy

Атрибут referrerpolicy сообщает, какую информацию передавать ресурсу по ссылке.

Синтаксис

1
<a referrerpolicy="<значение>">...</a>

Значения

no-referrer
не отправляет заголовок Referer.
no-referrer-when-downgrade
не отправляет заголовок Referer ресурсу без TLS (HTTPS). Это стандартное поведение браузера, если не указана иная политика.
origin
отправляет такую информацию о текущей странице, как адрес, протокол, хост и порт.
origin-when-cross-origin
отправляет другим ресурсам только протокол, хост и порт, а внутри ресурса также отправляет путь.
unsafe-url
отправляет только ресурс и адрес (но не пароли или никнеймы). Это значение небезопасно, так как могут утечь ресурс и адрес с TLS-защищённых ресурсов на небезопасные.

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

no-referrer-when-downgrade

rel

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

Синтаксис

1
<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>, или зарезервированное ключевое слово. При указании имени фрейма ссылка будет открываться во фрейме.

Синтаксис

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

Значения

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

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

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

_self

type

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

Синтаксис

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

Значения

MIME-тип

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

Нет.

Примеры

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!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>

Результат:

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!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>

Результат:

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

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

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

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

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

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

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

Комментарии