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: (внутреннее значение);
}