HTML тег <a>
Пример
Ссылка на W3Schools.com:
<a href="https://www.w3schools.com">Посетите W3Schools.com!</a>
Попробуйте сами »
Больше примеров далее "Попробуйте сами".
Определение и использование
Тег <a> определяет гиперссылку, которая используется для перехода с одной страницы на другую.
Наиболее важным атрибутом элемента <a> является атрибут href, который указывает на назначение ссылки.
По умолчанию ссылки будут выглядеть следующим образом во всех браузерах:
- Непосещенная ссылка подчёркнута и синим цветом
- Посещённая ссылка подчёркнута и фиолетовым цветом
- Активная ссылка подчёркнута и красным цветом
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <a> | Yes | Yes | Yes | Yes | Yes |
Все современные браузеры поддерживают тег <a>.
Советы и заметки
Примечание: Следующие атрибуты: download, hreflang, media, rel, target и type не могут присутствовать, если отсутствует основной атрибут href.
Примечание: Связанная страница обычно отображается в текущем окне браузера, если вы не укажете другую цель с помощью атрибута target.
Совет: Для стилизации ссылок используйте CSS: CSS Ссылки. Учебник и CSS Кнопки. Учебник
Различия между 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">Visit W3Schools.com!</a>
Попробуйте сами »
Пример
Как сделать ссылку на адрес электронной почты:
<a href="mailto:someone@example.com">Отправить email</a>
Попробуйте сами »
Пример
Как привязать к номеру телефона:
<a href="tel:+4733378901">+47 333 78 901</a>
Попробуйте сами »
Пример
Как сделать ссылку на другой раздел на той же странице:
<a href="#section2">Go to Section 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);
}
