<a> - якірний HTML елемент

HTML-елемент <a> (або якірний елемент) з атрибутом href створює гіперпосилання на веб-сторінки, файли, адреси електронної пошти, які розташувані на тій самій сторінці або будь-деінде, до чого може адресуватися URL-адреса.

Якщо тег <a> має атрибут href, то зміст повинен пояснювати куди веде посилання, тому використовувати текст "клікніть тут" - не є раціональним.

Зазвичай відкрите гіперпосилання відображається в поточній вкладці. Щоб змінити цю поведінку, викоритовуйте атрибут target.

Тег <a> без href — не буде посиланням, а лише елементом (часто використовують для JS-кліків).

HTML
<a>...</a>

Атрибути

Цей тег може мати глобальні атрибути.

attributionsrc

Предназначено для вимірювання ефективності реклами при збереженні приватності користувача. Коли користувач взаємодіє з контентом, браузер відправляє запрос по вказаному URL. Ви можете вказати дві версії цього атрибуту:

Булеве значення, тобто просто attributionsrc. В такому випадку браузер буде робити запрос на посилання з атрибуту href.
Одне, або декілька посилань розділених пробілом.

Є частиною Attribution Reporting API.

download

Змушує браузер завантаження файл по URL-адресу. Можна використовувати з назвою файлу або без нього:

Без значення браузер запропонує ім’я/розширення файлу, згенероване з різних джерел:
- HTTP-заголовок Content-Disposition
- Останній сегмент URL-адреси
- Тип медіа (із заголовка Content-Type, початку URL-адреси data: URL або Blob.type для URL-адреси blob: URL)
filename: Визначення значення, що використовується як ім’я файлу. Символи / та \ перетворюються на символи підкреслення (_). Файлові системи можуть забороняти інші символи в іменах файлів, тому браузери за потреби коригуватимуть запропоновану назву.

href

URL-адреса, на яку вказує гіперпосилання. Посилання не обмежуються URL-адресами на основі HTTP — вони можуть використовувати будь-яку схему URL-адрес, що підтримується браузерами:

tel: номер телефону.
mailto: електронна пошта.
sms: номер SMS.
javascript: код JavaScript.

hreflang

Вказує людську мову документу, на який зсилається URL в атрибуті href. Дозволені значення такі ж, як і для атрибута lang. На поточному документі не має ніякого функціоналу. Існує для покращення SEO.

ping

Список URL-адрес, розділених пробілами. Коли переходить за посиланням, браузер надсилає POST-запити з тілом PING на URL-адреси. Зазвичай для відстеження.

referrerpolicy

Яку частину реферера надсилати під час переходу за посиланням.

no-referrer: Заголовок Referer не буде надіслано
no-referrer-when-downgrade: Заголовок Referer не буде надіслано до джерел без TLS (HTTPS).
origin: Надісланий реферер буде обмежений походженням сторінки-посилання: її схемою, хостом та портом.
origin-when-cross-origin: Реферер, що надсилається до інших джерел, буде обмежений схемою, хостом і портом. Навігація в тому ж джерелі все одно включатиме шлях.
same-origin: Реферер буде надіслано для того самого походження, але запити з іншого походження не міститимуть інформації про реферера.
strict-origin: Надсилайте джерело документа як джерело посилання лише тоді, коли рівень безпеки протоколу залишається незмінним (HTTPS→HTTPS), але не надсилайте його до менш безпечного пункту призначення (HTTPS→HTTP).
strict-origin-when-cross-origin (за замовчуванням): Надсилати повну URL-адресу під час виконання запиту з тим самим походженням, надсилати походження лише тоді, коли рівень безпеки протоколу залишається незмінним (HTTPS→HTTPS), і не надсилати заголовок до менш безпечного пункту призначення (HTTPS→HTTP).
unsafe-url: Реферер включатиме джерело та шлях (але не фрагмент, пароль або ім’я користувача). Це значення є небезпечним, оскільки воно передає джерела та шляхи з ресурсів, захищених TLS, до небезпечних джерел.

rel

Зв’язок між поточним документом та посиланням в href.

target

Вказує де відкривати посилання. Це може бути поточний контекст (вкладка), новий або <iframe>. Наступні ключові слова визначають це:

_self: Поточний контекст перегляду (за замовчуванням).
_blank: Зазвичай в новому табі, але користувач може налаштувати браузер так, щоб відкривалось в новому вікні.
_parent: Батьківський контекст перегляду поточного. Якщо батьківського контексту немає, поводиться як _self
_top: Найвищий контекст перегляду. Якщо предків немає, поводиться як _self.
_unfencedTop: Дозволяє вбудованим огородженим фреймам переміщатися по фрейму верхнього рівня (тобто переміщатися за межі кореня огородженого фрейму, на відміну від інших зарезервованих пунктів призначення). Зверніть увагу, що навігація все одно буде успішною, якщо це використовується поза контекстом огородженого фрейму, але це не діятиме як зарезервоване ключове слово.

type

Атрибут type вказує MIME-тип пов’язаного ресурсу. Він має суто рекомендаційний характер.

charset

Вказує кодування сторніки на яку зсилається.

coords

Використовується з атрибутом shape. Список координатів розділених комами.

name

Потрібно було визначити можливе цільове розташування на сторінці. У HTML 4.01 id та name могли використовуватися в <a>, якщо вони мали однакові значення.

Замість цього використовуйте атрибут id.

rev

Вказано зворотне посилання; протилежність атрибуту rel. Застаріло, оскільки воно дуже заплутане.

shape

Форма області гіперпосилання на карті зображення

Технічне резюме

Категорія контенту	Потоковий контент, фразовий контент, інтерактивний контент, відчутний контент.
Дозволений вміст	Прозорий вміст, але без інтерактивного контенту в якості нащадка.
Пропуск тегів	Жоден, початковий та кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Будь-який елемент, що приймає фразовий контент, але не `<a>`.
Роль ARIA	`link`, якщо має атрибут `href`, інакше `generic`.
Дозволені ARIA атрибути	Якщо має атрибут `href`: `button` `checkbox` `menuitem` `menuitemcheckbox` `menuitemradio` `option` `radio` `switch` `tab` `treeitem` Якщо не має атрибуту `href`: Всі
DOM інтерфейс	`HTMLAnchorElement`

Приклади використання

<a
  href="https://example.com"
  target="_blank"
  rel="nofollow">
  Приклад посилання на іншу сторінку
</a>

<footer>
  <address>
    Служба підтримки
    <a href="tel:+0123456789">+0(122)345-6789</a>
  </address>
</footer>

<a
  href="mailto:mail@example.com">
  mail@example.com
</a>

Стилі за замовчуванням

CSS
a:link, a:visited {
  color: (internal value);
  cursor: auto;
  text-decoration: underline;
}

a:link:active, a:visited:active {
  color: (internal value);
}

Підтримка браузерів



`<a>`
`attributionsourceid`
`attributionsrc`
`charset`
`coords`
`download`
`href`
`hreflang`
`hreftranslate`
`implicit_noopener`
`interestfor`
`name`
`ping`
`referrerpolicy`
`rel`
`rev`
`shape`
`target`
`text_fragments`
`type`