Тег <a> HTML ссылка, гиперссылка, якорь

Рейтинг: 5 из 5, голосов 9
+++++

Тег <a> используется для определения ссылки (гиперссылки, якоря) в HTML документе. С помощью тега <a> можно ссылаться на другие страницы сайта и/или на конкретный элемент на странице (ссылка - якорь).

Содержит обязательный атрибут href в котором указывают абсолютный либо относительный адрес ссылки и/или id элемента для якорной ссылки. Относительный адрес, например href="/html" используется для указания позиции относительно текущего документа либо базового адреса из тега <base> (подробнее про <base>). Абсолютный адрес, например href="https://guruweba.com/html", не имеет привязки к текущему документу.

Существуют специальные ссылки mailto: - на электронную почту (открывает почтовый клиент пользователя, например gmail, с вписанным в строке "получатель" e-mail адресом со ссылки) и tel: - на номер телефона (для смартфонов - открывает набор номера и вводит номер со ссылки; для компьютеров - вызывает приложение для звонков, если установлено). Подробно эти виды ссылок описаны в статье: Ссылки на почту и номер телефона.

Синтаксис

<a href="URI_адрес">Анкор ссылки</a>

Анкор - слово или фраза при клике на которые будет происходить переход к ссылаемому элементу.

URI Адрес - Абсолютный или относительный адрес страницы сайта, с или без указания позиции (id-элемента).

Отображение в браузере

Справка Гуру Веба по HTML.

Примеры использования <a> в HTML коде

<html>
<body>
<a href="https://guruweba.com/html">Справка HTML</a> <!-- Ссылка с абсолютным адресом -->
<a href="/guruweba.com/css">Таблицы стилей CSS</a> <!-- Ссылка с относительным адресом -->
<a href="#paragraph2">Справка HTML. Параграф 2</a> <!-- Ссылка внутри страницы с переходом к указанному элементу ("#paragraph2" - id атрибут элемента) -->
<a href="https://guruweba.com/#paragraph2">Гуру Веба. Параграф 2</a> <!-- Ссылка с переходом на определенную позицию на другой странице -->
<a href="mailto:address@gmail.com">address@gmail.com</a> <!-- Ссылка на e-mail -->
<a href="tel:+71111111111">7(111)111-11-11</a> <!-- Ссылка на номер телефона -->
</body>
</html>

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<a> Да Да Да Да Да

Атрибуты

Атрибут Значения Описание
download

"пустой"
название файла

Указывает браузеру, что материал по ссылке необходимо скачать.

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

href URI адрес Определяет адрес документа, на который ведет ссылка.
hreflang language_code Указывает на язык документа по ссылке.
media media_query Указывает на устройство, для которого оптимизирован документ по ссылке.
rel alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag
Определяет отношение между текущим документом и документом по ссылке. Указывает чем является документ по ссылке для текущего.
target _blank
_parent
_self
_top
имя фрейма
Определяет где будет открыт ссылаемый документ: _blank - в новой вкладке или окне; _parent - в родительском окне; _self - в текущем окне (используется по умолчанию); _top - на весь экран.
type media_type Указывает на тип ссылаемого документа.
Устаревшие атрибуты
charset char_encoding Указывает на кодировку документа по ссылке.
coords coordinates Определяет координаты ссылки. Используется вместе с атрибутом shape, например, чтобы задать размер, форму и положение ссылки на изображении <img>.
name название элемента Задает название элемента для якорной ссылки. В HTML5 для этой цели используется универсальный атрибут id.
rev текстовое значение Определяет отношение между текущим документом и документом по ссылке. Противоположность rel. Указывает чем является текущий документ для ссылаемого.
shape default
rect
circle
poly
Определяет форму ссылки. Используется вместе с атрибутом coords, например, чтобы задать размер, форму и положение ссылки на изображении <img>.
Оцените, насколько полезна эта статья
+++++
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.