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

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

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

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

Атрибути

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

attributionsrc

Задає те, що ви хочете, аби браузер надіслав заголовок Attribution-Reporting-Eligible. На серверному боці такий заголовок використовується для запуску надсилання у відповіді заголовка Attribution-Reporting-Register-Source у відповіді, щоб зареєструвати джерело атрибуції на основі навігації.

Браузер зберігає дані про джерело, пов'язані з джерелом атрибуції, заснованим на навігації (таким, яке задано в заголовку відповіді Attribution-Reporting-Register-Source), коли користувач клацає посилання. Дивіться подробиці в API звітування про атрибуцію.

Можна задати одну з двох версій цього атрибуту:

• Булева версія, тобто просто запис attributionsrc. Це задає те, що ви хочете, аби до того ж сервера, що й заданий в атрибуті href, надсилався заголовок Attribution-Reporting-Eligible. Це прийнятно, коли реєстрація джерела атрибуції відбувається на тому ж самому сервері.

• Значення, що вміщає один або кілька URL, наприклад:

  attributionsrc="https://a.example/register-source
  https://b.example/register-source"
  

  Це корисно в тих випадках, коли запитаний ресурс не перебуває на сервері під вашим контролем або просто хочеться обробляти реєстрацію джерела атрибуції на іншому сервері. Тоді можна задати одну або більше адрес URL як значення attributionsrc. Коли відбувається запит на ресурс, заголовок Attribution-Reporting-Eligible надсилається на адреси URL, задані в attributionsrc, а не лише за походженням ресурсу. Ці адреси URL потім можуть відповісти заголовком Attribution-Reporting-Register-Source відповідно для завершення реєстрації.

  [!NOTE] Задання кількох адрес URL означає те, що на один елемент можна зареєструвати кілька джерел атрибуції. Можна, наприклад, мати різні кампанії, для вимірювання успішності яких потрібно генерувати різні звіти щодо різних даних. Елементи <a> не можуть використовуватися як пускачі атрибуції, а лише як її джерела.

download

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

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

  • Заголовка HTTP Content-Disposition
  • Останнього сегмента шляху URL
  • Типу медіаданих (із заголовка Content-Type, початку URL data: чи Blob.type в URL blob:)

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

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

type

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

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

charset

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

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

coords

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

name

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

[!NOTE] Використовуйте натомість глобальний атрибут id.

rev

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

shape

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

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

Доступність

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

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

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

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

<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>

Результат

• WebAIM: Посилання та гіпертекст – гіпертекстові посилання
• MDN / Розуміння WCAG, Настанови 3.2
• G200: Відкривання посилань в нових вікнах та вкладках лише тоді, коли це необхідно
• G201: Покращене попередження користувачів про відкривання нового вікна

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

Стрибкові посилання – це посилання, що розміщене якомога вище у вмісті <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;
}

Результат

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

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

• WebAIM: посилання "стрибкового переходу"
• Довідка: Використовуйте посилання стрибкового переходу
• MDN / Розуміння WCAG, пояснення Настанов 2.4
• Розуміння критеріїв успіху 2.4.1

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

Розмір

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

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

• Розуміння критеріїв успіху 2.5.5: Розмір мішені
• Розмір мішені та 2.5.5
• Хуткий тест: Великі мішені для дотику

Суміжність

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

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

• Тремтіння рук та проблема велетенської кнопки

Приклади

Посилання на абсолютний 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 href="./p">Відносний щодо директорії URL</a>
<a href="../p">Відносний щодо батьківської директорії URL</a>

a {
  display: block;
  margin-bottom: 0.5em;
}

Результат

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

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

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

Результат

[!NOTE] Для посилання на верх поточної сторінки можна використовувати 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". Дивіться сумісність із браузерами для отримання деталей.

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

Результат

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

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

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

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