Тег <a>

Тег `<a>` — гиперссылка (Anchor)

Тег <a> (от англ. anchor — «якорь») создаёт гиперссылку, которая связывает текущую страницу с другим документом, файлом или определённым местом на странице. Это один из ключевых элементов HTML, обеспечивающих навигацию в интернете.

Синтаксис

<!-- Простая ссылка -->
<a href="https://example.com">Текст ссылки</a>

<!-- Ссылка с таргетом (открывается в новой вкладке) -->
<a href="https://example.com" target="_blank">Открыть в новой вкладке</a>

<!-- Якорная ссылка (внутри страницы) -->
<a href="#section1">Перейти к разделу 1</a>

<!-- Ссылка на email -->
<a href="mailto:user@example.com">Написать письмо</a>

<!-- Ссылка на телефон -->
<a href="tel:+123456789">Позвонить</a>

Основные атрибуты

Атрибут	Описание
`href`	URL-адрес или якорь (`#id`), на который ведёт ссылка. Обязательный атрибут.
`target`	Где открыть ссылку: `_blank` (новая вкладка), `_self` (текущая вкладка, по умолчанию).
`rel`	Отношение между страницами (`noopener`, `nofollow`, `noreferrer` для безопасности).
`download`	Предлагает скачать файл по ссылке (если указан).
`title`	Всплывающая подсказка при наведении.
`id`	Уникальный идентификатор (используется для якорных ссылок).

Поддержка браузерами

Тег <a> поддерживается во всех браузерах с древнейших версий:
✅ Chrome, Firefox, Safari, Edge, Opera
✅ Internet Explorer (все версии, включая IE6)
✅ Мобильные браузеры (Android, iOS)

Особенности поддержки атрибутов:

target="_blank" работает везде, но в старых IE может быть уязвимость без rel="noopener".
download не работает в Safari (iOS) и некоторых мобильных браузерах.
mailto: и tel: поддерживаются везде, но могут требовать настройки на устройстве.

Примеры использования

1. Обычная ссылка

<a href="https://google.com">Перейти в Google</a>

2. Ссылка в новой вкладке (с защитой от `window.opener`)

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Безопасное открытие</a>

3. Внутренняя якорная ссылка

<a href="#contacts">Контакты</a>
...
<section id="contacts">...</section>

4. Ссылка на скачивание файла

<a href="/files/document.pdf" download>Скачать PDF</a>

5. Ссылка на email и телефон

<a href="mailto:test@example.com">Написать нам</a>
<a href="tel:+78005553535">Позвонить</a>

Важные особенности

Без href ссылка становится «пустой» (но может использоваться с JavaScript).
Стилизация: по умолчанию ссылки синие и подчёркнутые, но можно менять через CSS.
SEO: поисковики учитывают текст внутри <a> (анкор) при ранжировании.