САЙТ НАХОДИТСЯ В РАЗРАБОТКЕ
Баннер ТОП

HTML тег <a>


Пример

Ссылка на PROGtutorial.com:

<a href="http://www.progtutorial.com/">Посетите PROGtutorial.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.


Попробуйте сами - Примеры

Создать гиперссылки
Как создать гиперссылки.

Создать кликабельное изображение
Как использовать изображение в качестве ссылки.

Открыть ссылку в новом окне браузера
Как открыть ссылку в новом окне браузера, чтобы посетителю не пришлось покидать ваш веб-сайт.

Создать ссылку на электронную почту
Как сделать ссылку на почтовое сообщение (будет работать, только если у вас установлена программа - почтовый клиент).

Создать другую ссылку электронной почты
Другая почтовая ссылка.

Создать телефонную ссылку
Как сделать ссылку на номер телефона.

Ссылка на другой раздел на той же странице
Как создать ссылку на элемент с указанным идентификатором на странице (атрибут 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: (встроенное значение);
}
Примечание. Если ссылки не стилизованы с помощью CSS, то они будут отображаться согласно встроенному значению, т.е. настройкам браузера по умолчанию.