HTML тег <a>

Тег <a> используется для вставки ссылок, которые в HTML называются гиперссылками. В качестве гиперссылки можно использовать как текст, так и изображение.

В браузере гиперссылки отличаются своим видом и цветом. По умолчанию HTML ссылки отображаются как подчеркнутый текст синего цвета. При наведении курсора мыши на ссылку, она становится красной (активная ссылка). Ссылки, по которым уже кликали (посещенные ссылки), становятся фиолетовыми.

Изменить цвет ссылок и убрать подчеркивание можно при помощи CSS стилей․

Синтаксис тега <a>

Тег <a> парный, закрывающий тег </a> обязателен.

<a href="https://www.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://www.w3docs.com/">W3docs.com</a>
  </body>
</html>

Результат

W3docs.com

Нажав на ссылку, вы будете перенаправлены на домашнюю страницу нашего сайта.

Атрибут 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://www.w3docs.com/" target="_blank">W3docs.com</a>
  </body>
</html>

Результат

W3docs.com

Атрибут 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> также поддерживает глобальные атрибуты и атрибуты событий.

Browser support




Related articles