Тег HTML <a>
Тег <a> используется для вставки гиперссылок на другие страницы, файлы, места на той же странице, адреса электронной почты или любой другой URL. В качестве гиперссылки можно использовать как текст, так и изображение.
В браузере гиперссылки отличаются внешним видом и цветом. По умолчанию HTML-ссылки отображаются как синий подчеркнутый текст. Когда вы наводите курсор мыши на ссылку, она становится красной (активная ссылка). Ссылки, по которым уже щёлкнули (посещённые ссылки), становятся фиолетовыми.
Вы можете изменить цвет ссылок, убрать подчёркивание или изменить цвет ссылок, используя стили CSS.
TIP
Атрибуты "download", "media", "hreflang", "target", "rel" и "type" будут присутствовать только в том случае, если присутствует атрибут "href".
TIP
Пока вы не зададите другой target, связанная страница отображается в текущем окне браузера.
Синтаксис
Тег <a> используется парами. Содержимое записывается между открывающим (<a>) и закрывающим (</a>) тегами.
Атрибуты
Тег <a> может иметь атрибуты, которые предоставляют о нём дополнительную информацию.
Атрибут href
Атрибут href является обязательным для тега <a>. Он определяет ссылку на веб-странице или место на той же веб-странице, куда пользователь переходит после щелчка по ссылке. Значением атрибута является либо якорь, либо URL. Якорь указывает на ID (уникальный идентификатор) части веб-страницы, на которую делается ссылка. Перед ID ставится решётка (#).
Это выглядит так:
HTML <a> Tag
<a href="url">the link text</a>
<a href="#a">the link text</a>Пример тега HTML <a> с атрибутом href:
Пример тега HTML <a> Tag|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Результат
Нажмите на ссылку, и вы будете перенаправлены на главную страницу нашего сайта.
Используя атрибут href тега <a> вместе с тегом <img>, вы можете сделать изображение-ссылку.
Пример тега HTML <a> для создания изображения-ссылки:
Пример тега HTML <a> для создания изображения-ссылки:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
height: 90vh;
}
</style>
</head>
<body>
<a href="https://en.wikipedia.org/wiki/France">
<img src="https://images.unsplash.com/photo-1549144511-f099e773c147?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="France" />
</a>
</body>
</html>Атрибут target
Атрибут target используется, чтобы сообщить браузеру, где открыть документ (по умолчанию ссылки открываются в текущем окне).
Атрибут target может иметь следующие значения:
- _blank– открывает ссылку в новом окне.
- _self-opens the link in a current window.
- _parent - открывает документ в родительском фрейме.
- _top - открывает документ на всю ширину окна.
Пример тега HTML <a> с атрибутом target:
Пример тега HTML <a> Tag with a target attribute|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" target="_blank">W3docs.com</a>
</body>
</html>Результат
Атрибут rel
Этот атрибут задаёт отношение текущего документа к связанному документу. Значения атрибута могут быть следующими:
- alternate - альтернативная версия документа.
- author- ссылка на автора документа или статьи.
- bookmark - постоянная ссылка, используемая для закладок.
- nofollow - ссылки на документ без одобрения (это указывает поисковым системам, что краулер не должен переходить по этой ссылке).
Значение No follow
Если вы хотите создать ссылку nofollow, используйте rel="nofollow". Это сообщает поисковым системам, что вы не поддерживаете содержимое по другую сторону ссылки. Значение атрибута nofollow обычно используется в платных ссылках и рекламе. Иногда unfollow считается тегом или атрибутом, но на самом деле это значение атрибута rel.
Пример атрибута rel со значением "nofollow":
Пример атрибута "rel" со значением "nofollow":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>This text is from <a href="https://www.lipsum.com/" rel="nofollow" target="_blank">Lorem Ipsum</a>.</p>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| charset | char_encoding | Определяет кодировку символов связанного документа. Не используется в HTML5. |
| coords | coordinates | Определяет координаты ссылки. Не используется в HTML5. |
| download | filename | Определяет, что целевой файл будет загружен при щелчке по гиперссылке. |
| href | URL | Определяет URL связанного документа. |
| hreflang | language_code | Определяет язык связанного документа. |
| media | media_query | Определяет, для какого носителя/устройства оптимизирован связанный документ. |
| name | section_name | Определяет имя якоря. Не используется в HTML5. |
| ping | list_of_URLs | Определяет разделённый пробелами список URL, на которые при переходе по ссылке браузер отправит POST-запросы с телом ping (в фоновом режиме). Обычно используется для отслеживания. |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag | Определяет отношение между целевым объектом и связанным документом. |
| rev | text | Определяет обратную ссылку, обратное отношение атрибута "rel". Не используется в HTML5. |
| shape | default rect circle poly | Определяет форму гиперссылки. Не используется в HTML5. |
| target | _blank _parent _self _top | Определяет, где открыть связанный документ. |
| type | media_type | Определяет тип носителя в виде MIME- type для связанного URL. |
Тег <a> также поддерживает глобальные атрибуты и атрибуты событий.
Как стилизовать тег HTML <a>
{
"tag_name": "a"
}Практика
Каковы особенности и применение тега HTML <a>?