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

<a>

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

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

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

Демо

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

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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:nowhere@mozilla.org"
    >Отправить сообщение в никуда</a
>

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

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

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

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

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

Комментарии