HTML тег <a>
Пример
Ссылка на W3Schools.com:
<a href="https://www.w3schools.com">Посетить W3Schools.com!</a>
Попробуйте сами »
Больше примеров "Попробуйте сами" далее.
Определение и использование
Тег <a> определяет гиперссылку, которая используется для перехода с одной страницы на другую.
Самым важным атрибутом элемента <a> является атрибут href, который указывает на назначение ссылки.
По умолчанию ссылки будут выглядеть следующим образом во всех браузерах:
- непосещённая ссылка подчёркнута и синего цвета
- посещённая ссылка подчёркнута и фиолетового цвета
- активная ссылка подчёркнута и красного цвета
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <a> | Да | Да | Да | Да | Да |
Все современные браузеры поддерживают тег <a>.
Советы и примечания
Примечание: Следующие атрибуты: download, hreflang, media, rel, target и type не могут присутствовать, если отсутствует основной атрибут href.
Примечание: Связанная страница обычно отображается в текущем окне браузера, если вы не укажете другую цель с помощью атрибута target.
Совет: Для стилизации ссылок используйте CSS. Смотрите разделы CSS Ссылки и CSS Кнопки Учебника CSS на нашем сайте W3Schools на русском.
Различия между HTML 4.01 и HTML5
В HTML 4.01 тег <a> может быть гиперссылкой или якорем. В HTML5 тег <a> всегда является гиперссылкой, но если он не имеет атрибута href, он является лишь заполнителем для гиперссылки.
Спецификация HTML5 имеет некоторые новые атрибуты для ссылок, а некоторые атрибуты спецификации HTML 4.01 больше не поддерживаются.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| charset | char_encoding | Не поддерживается в HTML5. Определяет набор символов связанного документа |
| coords | coordinates | Не поддерживается в HTML5. Определяет координаты ссылки |
| download | filename | Определяет, что цель будет загружена, когда пользователь нажимает гиперссылку |
| href | URL | Определяет URL страницы, на которую ведёт ссылка |
| hreflang | language_code | Определяет язык связанного документа |
| media | media_query | Определяет, для какого носителя/устройства оптимизирован связанный документ |
| name | section_name | Не поддерживается в HTML5. Используйте глобальный id атрибут вместо этого. Определяет имя якоря |
| ping | list_of_URLs | Определяет разделённый пробелами список URL‑адресов, по которым при переходе по ссылке браузер будет отправлять запросы для отправки сообщений в фоновом режиме. Обычно используется для отслеживания |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
Определяет, какой реферер отправить |
| rel |
alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
Определяет связь между текущим документом и связанным документом |
| rev | text | Не поддерживается в HTML5. Определяет связь между связанным документом и текущим документом |
| shape |
default rect circle poly |
Не поддерживается в HTML5. Определяет форму ссылки |
| target |
_blank _parent _self _top framename |
Указывает, где открыть связанный документ |
| type | media_type | Определяет тип мультимедиа связанного документа |
Глобальные атрибуты
Тег <a> также поддерживает Глобальные атрибуты в HTML.
Атрибуты событий
Тег <a> также поддерживает Атрибуты событий в HTML.
Больше примеров
Пример
Как использовать изображение в качестве ссылки:
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">
</a>
Попробуйте сами »
Пример
Как открыть ссылку в новом окне браузера:
<a href="https://www.w3schools.com" target="_blank">Посетите W3Schools.com!</a>
Попробуйте сами »
Пример
Как сделать ссылку на адрес электронной почты:
<a href="mailto:someone@example.com">Отправить email</a>
Попробуйте сами »
Пример
Как привязать ссылку к номеру телефона:
<a href="tel:+4733378901">+47 333 78 901</a>
Попробуйте сами »
Пример
Как сделать ссылку на другой раздел на той же странице:
<a href="#section2">Перейти к разделу 2</a>
Попробуйте сами »
Пример
Как сделать ссылку на JavaScript:
<a href="javascript:alert('Hello World!');">Выполнить JavaScript</a>
Попробуйте сами »
Связанные страницы
HTML Учебник: HTML Ссылки
HTML DOM Справочник: Объект Anchor
CSS Учебник: Стилизация ссылок
Настройки CSS по умолчанию
Большинство браузеров будут показывать элемент <a> со следующими значениями по умолчанию:
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}
