Тег <a> используется для создания гипертекстовой ссылки. Гиперссылка может быть на другую веб-страницу, на какое-либо место внутри веб-страницы, на любой документ, на электронный адрес или вообще на любое место или объект в сети.
По умолчанию все браузеры отображают ссылки следующим образом:
- Непосещенная ссылка - подчеркнутый текст синего цвета
- Посещенная ссылка - подчеркнутый текст фиолетового цвета
- Активная (при клике (и удерживании) ЛКМ) - подчеркнутый текст красного цвета
В качестве ссылки может выступать не только текст, но и любой другой HTML элемент, который может быть расположен в теле документа, если его разместить внутри элемента <a>.
Наиболее важным атрибутом является атрибут href, который определяет адрес ссылка.
Атрибуты download, hreflang, media, rel, target и type использовать нельзя, если не определен атрибут href.
Страница, на которую указывает ссылка, открывается в том же окне браузера, что и страница с этой ссылкой, если не указать особо.
Чтобы определить элемент внутри страницы, к которому будет осуществлён переход по ссылке, нужно использовать глобальный атрибут id, указав его у соответствующего элемента:
<!-- значение атрибута id может быть любым -->
<div id="a1">Новый раздел</h2>
После этого, чтобы перейти к нему, в значении атрибута href тега <a> необходимо указать значение атрибута id (идентификатор) с символом решетки (#) перед ним. Если элемент к которому будет сделан переход находится на той же самой странице, то адрес страницы в атрибуте href можно опустить, написав только идентификатор.
<!-- анкор внутри той же самой страницы -->
<a href="#a1">ссылка</a>
<!-- анкор на другой странице -->
<a href="//msiter.ru/#a1">ссылка</a>
<a href="//msiter.ru/page.html#a1">ссылка</a>
Разница между HTML 4.01 и HTML5
В HTML 4.01 тег <a> может быть либо анкором, либо гиперссылкой. В HTML5 тег <a> - всегда гиперссылка, однако, если у него не определен атрибут href, то он считается всего лишь "заполнителем" для гиперссылки.
В HTML5 были добавлены новые атрибуты и некоторые атрибуты, допустимые в HTML 4.01, удалены.
Атрибуты тега <a>
| Атрибут | Описание |
|---|---|
| charset | Определяет кодировку символов документа, на который ведет ссылка |
| coords | Определяет координаты ссылки в карте изображений |
| download | Определяет, что документ, на который указывает ссылка, будет загружаться |
| href | Определяет URL страницы, на которую ведет ссылка |
| hreflang | Определяет язык документа, на который указывает ссылка |
| media | Определяет устройство вывода, для которого оптимизирован документ, на который ведет ссылка |
| name | Определяет имя анкора |
| rel | Определяет отношение с документом, на который ведет ссылка |
| rev | Определяет отношение с документом, на который ведет ссылка |
| shape | Определяет форму ссылки в карте изображений |
| target | Определяет, где открывать документ, на который ведет ссылка |
| type | Определяет медиа-тип документа, на который указывает ссылка |
Общие атрибуты
Тег <a> поддерживает общие атрибуты и атрибуты-события.
CSS стили по умолчанию
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}
HTML пример использования
Ссылка на сайт:
<a href="http://www.msiter.ru">Ссылка на URI</a>
<a href="#content">Ссылка на анкор</a>
