Тег <a> используется для вставки ссылок, которые в HTML называются гиперссылками. В качестве гиперссылки можно использовать как текст, так и изображение.
В браузере гиперссылки отличаются своим видом и цветом. По умолчанию HTML ссылки отображаются как подчеркнутый текст синего цвета. При наведении курсора мыши на ссылку, она становится красной (активная ссылка). Ссылки, по которым уже кликали (посещенные ссылки), становятся фиолетовыми.
Изменить цвет ссылок и убрать подчеркивание можно при помощи CSS стилей․
Синтаксис тега <a>
Тег <a> парный, закрывающий тег </a> обязателен.
<a href="https://ru.w3docs.com/">W3docs.com</a>Атрибуты тега <a>
Вместе с тегом <a> используются атрибуты, дополнительные параметры, которые дают дополнительные возможности форматирования текста. Приведем некоторые из них.
Атрибут href
Обязательный атрибут тега <a> href указывает ссылку на веб-страницу либо определяет место на той же веб-странице, куда пользователь перейдет после нажатия на ссылку. Значением атрибута может быть как URL, так и якорь. Якорь указывает на ID (уникальный идентификатор) части веб-страницы, на который ведет ссылка. Перед ID ставится символ решетки (#).
Выглядит это так:
<a href="url">текст ссылки</a>
<a href="#a">текст ссылки</a>Пример использования тега <a>
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<a href="https://ru.w3docs.com/">W3docs.com</a>
</body>
</html>Результат
Нажав на ссылку, вы будете перенаправлены на домашнюю страницу нашего сайта.
Атрибут target
Атрибут target указывает браузеру, в каком окне открывать документ (по умолчанию ссылки открываются в текущем окне).
Для атрибута target существуют следующие значения:
- _blank открывает ссылку в новом окне.
- _self открывает ссылку в текущем окне
- _parent открывает документ в родительском фрейме.
- _top cancels all frames, and opens in full browser window.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<a href="https://ru.w3docs.com/" target="_blank">W3docs.com</a>
</body>
</html>Результат
Атрибут rel
Этот атрибут устанавливает отношения текущего документа к ссылке. Возможными значениями атрибута могут быть:
- alternate - указывает альтернативную версию документа.
- author - ссылка на автора документа или статьи
- bookmark - постоянная ссылка, которая используется для закладок.
- nofollow - сообщает поисковым системам, что не следует передавать по ссылке ТИЦ и PR
| Атрибут | Значение | Описание |
|---|---|---|
| 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, на которые браузер должен отправить 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-тип связанного документа. |
Тег <a> также поддерживает глобальные атрибуты и атрибуты событий.
Как добавить стиль к тегу <a> ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <a>:
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега <a>:
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега <a>:
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега <a>:
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Практикуйте свои знания
