HTML - тег <a> используется для вставки гиперссылок на другие страницы или файлы, местоположения на той же странице, адреса электронной почты или любой другой URL-адрес. В качестве гиперссылки можно использовать как текст, так и изображение.
Тег <a> - синтаксис и код
Тег <a> представлен парами. Содержимое записывается между открывающим (<a>) и закрывающим (</a>) тегами.
Пример кода ссылки на AppNet.Club:
<a href="https://www.appnet.club/">Посетите AppNet.Club!</a>
Элемент <a>
Посетите AppNet.Club!
Определение и использование
- HTML - тег
<a> определяет гиперссылку, которая используется для перехода с одной страницы на другую;
- Самым важным атрибутом элемента
<a> является атрибут href, который указывает место назначения ссылки. Если у тега <a> нет атрибута href, это всего лишь заполнитель для гиперссылки;
- Связанная страница обычно отображается в текущем окне браузера, если вы не укажете другую цель.
По умолчанию во всех браузерах ссылки будут выглядеть следующим образом:
- Непосещенная ссылка подчеркнута синим цветом;
- Посещенная ссылка подчеркнута и фиолетового цвета;
- Активная ссылка подчеркнута и выделена красным цветом.
✪ Рекомендация: вы можете изменить цвет ссылок, удалить подчеркивание или изменить цвет ссылок, используя стили CSS.
★ Примечание: атрибуты: download, media, hreflang, target, rel и type будут присутствовать только в том случае, если присутствует атрибут «href».
Поддержка <a> браузерами
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
Атрибуты
| Атрибут |
Значение |
Описание |
| download |
filename |
Указывает, что целевой объект будет загружен, когда пользователь нажмет на гиперссылку |
| href |
URL |
Указывает URL-адрес страницы, на которую ведет ссылка |
| hreflang |
language_code |
Указывает язык связанного документа |
| media |
media_query |
Указывает, для какого носителя/устройства оптимизирован связанный документ |
| ping |
list_of_URLs |
Указывает разделенный пробелами список URL-адресов, на которые при переходе по ссылке браузер будет отправлять запросы на публикацию с телом ping (в фоновом режиме). Обычно используется для отслеживания |
| referrerpolicy |
no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-origin-when-cross-origin
unsafe-url |
Указывает, какую информацию о реферере отправлять вместе со ссылкой |
| rel |
alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag |
Указывает связь между текущим документом и связанным документом |
| target |
_blank
_parent
_self
_top |
Указывает, где открыть связанный документ |
| type |
media_type |
Указывает тип носителя связанного документа |
Глобальные атрибуты
Тег <a> также поддерживает глобальные атрибуты в HTML
Атрибуты событий
Тег <a> также поддерживает атрибуты событий в HTML
Дополнительные примеры
Абсолютные и относительные URL-адреса:
<h2> Абсолютные URL -адреса </h2>
<p> <a href="https://www.w3.org/">W3C</a> </p>
<p> <a href="https://www.ya.ru/">Яндекс</a> </p>
<h2> Относительные URL </h2>
<p> <a href="/html_images.png">HTML изображение</a> </p>
<p> <a href="/html">HTML раздел</a> </p>
Изображение в качестве ссылки:
<a href="/html">
<img src="/htm/smiling.png" alt="Руководство по HTML" style="width:75px;height:75px;">
</a>
Изображение ниже является ссылкой. Попробуйте нажать на него.
Ссылка на адрес электронной почты:
<a href="mailto:someone@example.com">Отправить письмо</a>
Нажмите на ссылку ниже, чтобы увидеть, как это работает:
Отправить письмо
Связанные страницы
Руководство по HTML: ссылки HTML
Настройки CSS по умолчанию
Большинство браузеров отображают элемент a со следующими значениями по умолчанию:
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}
Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.
