HTML элементы. Тег <a>
Курс по основам HTML. W3Schools на русском. Уроки для начинающих
Пример
Ссылка на W3Schools.com:
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
Попробуйте сами »
Больше примеров ниже "Попробуйте сами".
Определение и использование
Тег <a> определяет гиперссылку, которая используется для перехода с одной страницы на другую.
Наиболее важным атрибутом элемента <a> является атрибут href, который указывает на назначение ссылки.
По умолчанию ссылки будут выглядеть следующим образом во всех браузерах:
- Непосещенная ссылка подчёркнута и синим цветом
- Посещённая ссылка подчёркнута и фиолетовым цветом
- Активная ссылка подчёркнута и красным цветом
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <a> | Yes | Yes | Yes | Yes | Yes |
Советы и заметки
Совет: Следующие атрибуты: download, hreflang, media, rel, target и type не могут присутствовать, если отсутствует атрибут href.
Совет: Связанная страница обычно отображается в текущем окне браузера, если вы не укажете другую цель.
Совет: Используйте 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.
Попробуйте сами - Примеры
Создать гиперссылки
Как создавать гиперссылки.
Создать кликабельное изображение
Как использовать изображение в качестве ссылки.
Открыть ссылку в новом окне браузера
Как открыть ссылку в новом окне браузера, чтобы посетителю не пришлось покидать ваш веб-сайт.
Создать ссылку на электронную почту
Как сделать ссылку на почтовое сообщение (будет работать, только если у вас установлена программа - почтовый клиент).
Создать другую ссылку электронной почты
Другая почтовая ссылка.
Создать телефонную ссылку
Как сделать ссылку на номер телефона.
Ссылка на другой раздел на той же странице
Как создать ссылку на элемент с указанным идентификатором на странице (атрибут name не поддерживается в HTML5).
Ссылка на JavaScript
Как добавить JavaScript внутри атрибута href.
Связанные страницы
HTML учебник: HTML Ссылки
HTML DOM справочник: Объект Anchor
CSS Учебник: Стилизация ссылок
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент <a> со следующими значениями по умолчанию:
a:link, a:visited {
color: (внутреннее значение);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (внутреннее значение);
}