<a>: Якірний елемент

{{HTMLSidebar}}

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

Вміст всередині кожного <a> повинен відображати спрямування посилання. Якщо присутній атрибут href, то натискання клавіші Enter, коли фокус знаходиться на елементі <a>, активує перехід.

Спробуйте його в дії

Атрибути

Атрибути цього елемента включають глобальні атрибути.

download

Змушує браузер обробляти заданий URL як завантаження. Може використовуватись як без, так і зі значенням filename:

  • Якщо значення немає, то браузер запропонує ім'я файлу та розширення, згенеровані з різних джерел:

  • filename: якщо значення задане, то воно буде запропоновано як назва файлу. Символи / і \ перетворюються на підкреслення (_). Файлові системи можуть забороняти інші символи в іменах файлів, тож браузери підлаштовуватимуть запропоноване ім'я, якщо це необхідно.

Примітка:

  • download працює лише для URL того самого походження, а також для схем blob: і data:.

  • Те, як браузери обробляють завантаження, залежить від браузера, налаштувань користувача та інших чинників. Користувача можуть запитати підтвердження перед початком завантаження, або ж файл може бути збережений автоматично, або ж буде автоматично відкритий: у зовнішньому застосунку, або в самому браузері.

  • Якщо заголовок Content-Disposition містить інформацію, що відрізняється від значення атрибута download, логіка може відрізнятися:

    • Якщо заголовок задає filename, то таке ім'я файлу матиме пріоритет над заданим в атрибуті download.
    • Якщо заголовок задає природу ресурсу як inline (вбудовану), Chrome і Firefox віддадуть пріоритет атрибутові та оброблятимуть це як завантаження. Старі версії Firefox (до 82) віддавали пріоритет заголовкові та показували вміст як вбудований.
href

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

  • Розділи сторінки – за допомогою фрагментів документів
  • Конкретні частини тексту - за допомогою текстових фрагментів
  • Шматочки медіафайлів – за допомогою фрагментів медіа
  • Номери телефонів – за допомогою URL tel:
  • Адреси електронної пошти – за допомогою URL mailto:
  • Текстові повідомлення SMS – за допомогою URL sms:
  • Хоч веббраузери можуть не підтримувати інші схеми URL, вебсайти можуть їх підтримувати за допомогою registerProtocolHandler()
hreflang

Рекомендації щодо мови тексту в ресурсі за посиланням. Вбудованої логіки немає. Дозволені значення – такі самі, як в глобального атрибута lang.

ping

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

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

Відношення вказаного URL як розділені пробілами типи посилань.

target

Де показувати вказаний URL; значенням є ім'я контексту перегляду (вкладка, вікно чи <iframe>). Наступні ключові слова мають особливі значення щодо того, де завантажувати URL:

  • _self: Поточний контекст перегляду. (Усталене значення)

  • _blank: Зазвичай нова вкладка, але користувач може налаштувати свій браузер так, що він замість цього відкриватиме такі посилання у новому вікні.

  • _parent: Контекст перегляду, що є батьківським відносно поточного. Якщо такого контексту немає, це значення поводиться як _self.

  • _top: Верхній контекст перегляду. Якщо конкретніше, то це означає "найвищий" контекст, що є предком поточного контексту. Якщо предків немає, це значення поводиться як _self.

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

Примітка: target="_blank" на елементах <a> неявно встановлює таку саму поведінку rel, як встановлення rel="noopener", що не заповнює window.opener.

type

Дає підказку щодо формату ресурсу за URL у вигляді типу MIME. Вбудованої функціональності немає.

Нерекомендовані атрибути

charset

Підказка щодо кодування символів ресурсу за URL.

Примітка: Цей атрибут є нерекомендованим і не повинен використовуватись авторами. Використовуйте HTTP заголовок Content-Type за вказаним URL.

coords

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

name

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

Примітка: Використовуйте натомість глобальний атрибут id.

rev

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

shape

Форма регіону гіперпосилання на бітовій карті.

Примітка: Використовуйте натомість для бітових карт елемент <area>.

Приклади

Посилання на абсолютний URL

HTML

<a href="https://www.mozilla.com">Mozilla</a>

Результат

Посилання на відносні URL

HTML

<a href="//example.com">Відносний щодо схеми URL</a>
<a href="/uk/docs/Web/HTML">Відносний щодо походження URL</a>
<a href="./p">Відносний щодо директорії URL</a>

Результат

Посилання на елемент в межах тієї самої сторінки

<!-- <a> елемент посилається на секцію нижче -->
<p><a href="#rozdil-nyzhche">Перескочити до заголовка нижче</a></p>

<!-- Заголовок для посилання на нього -->
<h2 id="rozdil-nyzhche">Розділ нижче</h2>

Результат

Примітка: Для посилання на верх поточної сторінки можна використовувати href="#top" чи пустий фрагмент (href="#"), це описано в специфікації HTML (англ.).

Посилання на адресу електронної пошти

Щоб створити посилання, котрі відкривають програму електронної пошти користувача, щоб дати змогу надіслати нове повідомлення, слід використовувати схему mailto::

<a href="mailto:[email protected]">Послати в нікуди електронного листа</a>

Результат

Для деталей щодо URL mailto:, наприклад, включення в них теми чи тіла листа, читайте посилання електронної пошти чи RFC 6068.

Посилання на номери телефонів

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

Результат

Поведінка посилання tel: відрізняється залежно від можливостей пристрою:

  • Стільникові пристрої автоматично починають дзвінок за номером.
  • Більшість операційних систем мають програми, котрі можуть робити дзвінки, наприклад, Skype чи FaceTime.
  • Вебсайти можуть робити телефонні дзвінки за допомогою registerProtocolHandler, наприклад, через web.skype.com.
  • Інша можлива поведінка – збереження номера до контактів, надсилання номера на інший пристрій тощо.

Дивіться RFC 3966 для синтаксису, додаткових можливостей та інших деталей щодо схеми URL tel:.

Використання атрибута download для збереження <canvas> як PNG зображення

Щоб зберегти вміст елемента <canvas> як зображення, треба створити посилання, в якого href буде даними полотна у вигляді URL data:, створеного за допомогою JavaScript, а атрибут download надаватиме ім'я файлу зображення PNG, що буде стягуватися:

Приклад застосунку для малювання з посиланням для збереження

HTML
<p>
  Малюйте, затискаючи ліву кнопку миші та рухаючи.
  <a href="" download="my_painting.png">Стягнути мій малюнок</a>
</p>

<canvas width="300" height="300"></canvas>
CSS
html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}
JavaScript
const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
let isDrawing;

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI * 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
  );
Результат

Захищеність та приватність

Елементи <a> можуть мати наслідки для захищеності та приватності користувачів. Дивіться Заголовок Referer: занепокоєння щодо приватності та захищеності для отримання інформації на цю тему.

Використання target="_blank" без rel="noreferrer" і rel="noopener" робить вебсайт вразливим то атак експлуатації API window.opener; втім, майте на увазі, що в новіших версіях браузерів встановлення target="_blank" неявно додає такий само захист, як встановлення rel="noopener". Дивіться сумісність із браузерами для отримання деталей.

Занепокоєння щодо доступності

Виразний текст посилання

Вміст всередині посилання повинен вказувати, куди веде це посилання, навіть при розгляді поза контекстом.

Невиразний текст посилання із проблемами доступності

Прикро поширена помилка – робити посилання зі словами "клацніть тут" або "тут".

<p>Дізнайтеся більше про наші продукти <a href="/products">тут</a>.</p>
Результат

Виразний текст посилання

На щастя, це легко виправити, і виходить насправді коротше за версію з проблемами доступності!

<p>Дізнайтеся більше <a href="/products">про наші продукти</a>.</p>
Результат

Допоміжне програмне забезпечення має зручне скорочення для перелічення усіх посилань на сторінці. Втім, виразний текст посилань корисний для всіх користувачів: скорочення "перелічити всі посилання" імітує те, як зрячі користувачі хутко проглядають сторінки.

Події onclick

Якірними елементами часто зловживають у вигляді підробних кнопок, задаючи їх значення href у # чи javascript:void(0), щоб запобігти оновленню сторінки, а потім слухаючи їхні події click.

Ці неповноцінні значення href приводять до неочікуваної поведінки при копіюванні чи перетягуванні посилань, відкритті посилань у нових вкладках чи вікнах, доданні закладок, або ж коли JavaScript завантажується, дає збій чи вимкнений. Також вони надають допоміжним технологіям, як то читачам з екрана, некоректну семантику.

Натомість слід використовувати <button>. Як правило, слід використовувати гіперпосилання лише для переходу за справжнім URL.

Зовнішні посилання та посилання на не-HTML ресурси

Посилання, що за допомогою target="_blank" відкриваються в новій вкладці чи новому вікні, а також посилання, що вказують на файл для завантаження, повинні показувати, що станеться, коли за посиланням відбудеться перехід.

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

Посилання, що відкривається в новій вкладці чи новому вікні

<a target="_blank" href="https://uk.wikipedia.org">
  Вікіпедія (відкривається у новій вкладці)
</a>
Результат

Посилання на не-HTML ресурс

<a href="2017-annual-report.ppt">2017 Річний звіт (PowerPoint)</a>

Якщо призначення посилання позначено іконкою, слід пересвідчитись, що ця іконка має текстову альтернативу:

<a target="_blank" href="https://uk.wikipedia.org">
  Вікіпедія
  <img alt="(відкривається в новій вкладці)" src="newtab.svg" />
</a>

<a href="2017-annual-report.ppt">
  2017 Річний звіт
  <img alt="(файл PowerPoint)" src="ppt-icon.svg" />
</a>
Результат

Стрибкові посилання

Стрибкові посилання – це посилання, що розміщене якомога вище у вмісті <body> і веде до початку головного вмісту сторінки. Зазвичай CSS приховує стрибкові посилання поза екраном, поки воно не отримує фокус.

<body>
  <a href="#content" class="skip-link">Перескочити на головний вміст</a>

  <header></header>

  <!-- Стрибкове посилання приводить сюди -->
  <main id="content"></main>
</body>
.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}

Результат

Стрибкові посилання дають користувачам клавіатури змогу пропустити вміст, що повторюється на багатьох сторінках, наприклад, навігацію у верхньому колонтитулі.

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

Розмір та суміжність

Розмір

Інтерактивні елементи типу посилань повинні надавати достатньо велику зону, щоб їх легко було активувати. Це корисно для різних людей, включно з тими, хто має розлади контролю рухів та тих, хто має малоточні засоби введення, наприклад, сенсорний екран. Рекомендований мінімальний розмір – 44×44 пікселів CSS (англ.).

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

Суміжність

Інтерактивні елементи типу посилань, бувши розміщеними з видимою суміжністю, повинні мати між собою простір. Відступ допоможе людям з розладами контролю рухів, котрі інакше можуть випадково активувати не той інтерактивний вміст.

Відступи можна утворити за допомогою властивостей CSS типу margin.

Технічний підсумок

Категорії вмісту Потоковий вміст, оповідальний вміст, інтерактивний вміст, відчутний вміст.
Дозволений вміст Прозорий, але жодний нащадок не може бути інтерактивним вмістом чи елементом a; крім того, жодний нащадок не може мати атрибута tabindex.
Пропуск тега Немає; і початковий, і кінцевий теги – обов'язкові.
Дозволені батьківські елементи Будь-який елемент, що приймає потоковий вміст, але не інший елемент <a>.
Неявна роль ARIA link, коли присутній атрибут href, інакше – generic
Дозволені ролі ARIA

Коли присутній атрибут href:

Коли атрибута href немає:

  • будь-яка роль
Інтерфейс DOM HTMLAnchorElement

Результат

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
a
Chrome Full support Yes
Edge Full support 12
Firefox Full support Yes
footnote
Internet Explorer Full support Yes
Opera Full support Yes
Safari Full support Yes
WebView Android Full support Yes
Chrome Android Full support Yes
Firefox for Android Full support Yes
footnote
Opera Android Full support Yes
Safari on iOS Full support Yes
Samsung Internet Full support Yes
charset
Deprecated
Chrome Full support Yes
Edge Full support 12
Firefox Full support Yes
Internet Explorer Full support Yes
Opera Full support Yes
Safari Full support Yes
WebView Android Full support Yes
Chrome Android Full support Yes
Firefox for Android Full support Yes
Opera Android Full support Yes
Safari on iOS Full support Yes
Samsung Internet Full support Yes
coords
Deprecated
Chrome No support No
Edge No support No
Firefox No support ? –  58
footnote
Internet Explorer No support No
Opera No support No
Safari No support No
WebView Android No support No
Chrome Android No support No
Firefox for Android No support ? –  58
footnote
Opera Android No support No
Safari on iOS No support No
Samsung Internet No support No
download
Chrome Full support 14
footnote
Edge Full support 18
Firefox Full support 20
Internet Explorer No support No
Opera Full support 15
Safari Full support 10.1
WebView Android Full support Yes
footnote
Chrome Android Full support 18
footnote
Firefox for Android Full support 20
Opera Android Compatibility unknown; please update this. ?
Safari on iOS Full support 13
Samsung Internet Full support 1.0
footnote
href
Chrome Full support Yes
Edge Full support 12
Firefox Full support Yes
Internet Explorer Full support Yes
Opera Full support Yes
Safari Full support Yes
WebView Android Full support Yes
Chrome Android Full support Yes
Firefox for Android Full support Yes
Opera Android Full support Yes
Safari on iOS Full support Yes
Samsung Internet Full support Yes
href = \'#top\'
Chrome Full support Yes
Edge Full support 12
Firefox Full support 10
Internet Explorer Full support Yes
Opera Full support Yes
Safari Full support Yes
WebView Android Full support Yes
Chrome Android Full support Yes
Firefox for Android Full support 10
Opera Android Full support Yes
Safari on iOS Full support Yes
Samsung Internet Full support Yes
hreflang
Chrome Full support Yes
Edge Full support 12
Firefox Full support Yes
Internet Explorer Full support Yes
Opera Full support Yes
Safari Full support Yes
WebView Android Full support Yes
Chrome Android Full support Yes
Firefox for Android Full support Yes
Opera Android Full support Yes
Safari on iOS Full support Yes
Samsung Internet Full support Yes
target="_blank" implies rel="noopener" behavior
Chrome Full support 88
Edge Full support 88
Firefox Full support 79
Internet Explorer No support No
Opera No support No
Safari Full support 12.1
WebView Android No support No
Chrome Android Full support 88
Firefox for Android Full support 79
Opera Android Full support Yes
Safari on iOS Full support 12.2
Samsung Internet Full support 15.0
name
Deprecated
Chrome Full support Yes
Edge Full support 12
Firefox Full support Yes
Internet Explorer Full support Yes
Opera Full support Yes
Safari Full support Yes
WebView Android Full support Yes
Chrome Android Full support Yes
Firefox for Android Full support Yes
Opera Android Full support Yes
Safari on iOS Full support Yes
Samsung Internet Full support Yes
ping
Chrome Full support 12
Edge Full support 17
Firefox Full support Yes
disabled
Internet Explorer No support No
Opera Full support 15
Safari Full support 6
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android No support No
Opera Android Full support 14
Safari on iOS Full support 6
Samsung Internet Full support 1.0
referrerpolicy
Chrome Full support 51
Edge Full support 79
Firefox Full support 50
Internet Explorer No support No
Opera Full support 38
Safari Full support 14
WebView Android Full support 51
Chrome Android Full support 51
Firefox for Android Full support 50
Opera Android Full support 41
Safari on iOS Full support 14
Samsung Internet Full support 7.2
rel
Chrome Full support Yes
Edge Full support 12
Firefox Full support Yes
Internet Explorer Full support Yes
Opera Full support Yes
Safari Full support Yes
WebView Android Full support Yes
Chrome Android Full support Yes
Firefox for Android Full support Yes
Opera Android Full support Yes
Safari on iOS Full support Yes
Samsung Internet Full support Yes
rel.noopener
Chrome Full support 49
Edge Full support 79
Firefox Full support 52
footnote
Internet Explorer No support No
Opera Full support 36
Safari Full support 10.1
WebView Android Full support 49
Chrome Android Full support 49
Firefox for Android Full support 52
footnote
Opera Android Full support 36
Safari on iOS Full support 10.3
Samsung Internet Full support 5.0
rel.noreferrer
Chrome Full support 16
Edge Full support 13
Firefox Full support 33
Internet Explorer Partial support 11
footnote
Opera Full support 15
Safari Full support 5
WebView Android Full support 3
Chrome Android Full support 18
Firefox for Android Full support 33
Opera Android Full support 14
Safari on iOS Full support 4.2
Samsung Internet Full support 1.5
rev
Deprecated
Chrome Full support Yes
Edge Full support 12
Firefox Full support Yes
Internet Explorer Full support Yes
Opera Full support Yes
Safari Full support Yes
WebView Android Full support Yes
Chrome Android Full support Yes
Firefox for Android Full support Yes
Opera Android Full support Yes
Safari on iOS Full support Yes
Samsung Internet Full support Yes
shape
Deprecated
Chrome No support No
Edge No support No
Firefox No support ? –  58
footnote
Internet Explorer No support No
Opera No support No
Safari No support No
WebView Android No support No
Chrome Android No support No
Firefox for Android No support ? –  58
footnote
Opera Android No support No
Safari on iOS No support No
Samsung Internet No support No
target
Chrome Full support Yes
Edge Full support 12
Firefox Full support Yes
Internet Explorer Full support Yes
Opera Full support Yes
Safari Full support Yes
WebView Android Full support Yes
Chrome Android Full support Yes
Firefox for Android Full support Yes
Opera Android Full support Yes
Safari on iOS Full support Yes
Samsung Internet Full support Yes
type
Chrome Full support Yes
Edge Full support 12
Firefox Full support Yes
Internet Explorer Full support Yes
Opera Full support Yes
Safari Full support Yes
WebView Android Full support Yes
Chrome Android Full support Yes
Firefox for Android Full support Yes
Opera Android Full support Yes
Safari on iOS Full support Yes
Samsung Internet Full support Yes

Дивіться також

  • <link> подібний до <a>, але призначений для гіперпосилань метаданих, невидимих для користувачів.
  • :link – це псевдоклас CSS, що дає збіг з елементами <a>, в атрибуті href яких задані URL, котрі користувач поки не відвідував.
  • :visited – це псевдоклас CSS, що дає збіг з елементами <a>, в атрибуті href яких задані URL, котрі користувач уже відвідував у минулому.
  • :any-link – це псевдоклас CSS, що дає збіг з елементами <a>, котрі мають атрибут href.
  • Текстові фрагменти – це інструкції користувацькому агентові, додані до URL, що дають змогу авторам вмісту посилатися на конкретний текст на сторінці, не вимагаючи від елементів мати ID.