Тег <a>

Тег <a> (укр. – “посилання”) в HTML використовується для створення гіперпосилань, які дозволяють користувачу переходити на інші сторінки, документи або конкретні місця на тій самій сторінці. Він є рядковим елементом, що означає, що вміст після посилання продовжує відображатися на тому ж рядку.

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

Атрибути

Специфічні атрибути

  • href — URL або якорь, на який посилається посилання. Наприклад:
<a href="https://example.com">Перейти на іншу сторінку</a>
<a href="#section1">Перейти до розділу на цій сторінці</a>
  • target — визначає, де відкриватиметься пов’язаний документ. Основні значення:
    • _self (за замовчуванням) — відкрити в поточному вікні.
    • _blank — відкрити в новій вкладці або вікні.
    • _parent — відкрити у батьківському вікні.
    • _top — відкрити в найвищому (основному) вікні.
  • rel — визначає відношення між поточною сторінкою і посиланням. Часто використовується з target=”_blank” для забезпечення безпеки:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Відкрити в новій вкладці</a>
  • download — цей атрибут використовується для завантаження файлу. Якщо він присутній, браузер запропонує користувачу завантажити ресурс замість його відкриття. Наприклад:
<a href="file.pdf" download="newfile.pdf">Завантажити файл і запропонувати йому назву newfile</a>
  • hreflang — вказує мову документа за посиланням, що може бути корисно для пошукових систем.
  • type — визначає MIME-тип ресурсу, на який веде посилання (наприклад, для мультимедійних файлів).

Глобальні атрибути

Найпопулярніші глобальні атрибути, які використовуються на посиланнях:

  • id — унікальний ідентифікатор елемента на сторінці, який можна використовувати для посилань, стилізації або JavaScript-операцій;
  • class — клас, який допомагає стилізувати або групувати елементи;
  • style — атрибут для інлайн-стилізації конкретного елементу;
  • lang — атрибут для вказання мови вмісту елемента;
  • dir — атрибут, який вказує напрямок тексту (наприклад, “ltr” — зліва направо, “rtl” — справа наліво);
  • title — атрибут, який використовується для додавання підказки, яка з’являється при наведенні курсору на елемент;
  • aria-label — атрибут, який використовується для забезпечення доступності (accessibility).

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

<a href="<https://example.com>" title="Перейти на сайт Example">Посилання на Example</a>

Додаткові моменти

  • Тег <a> є парним елементом, тому його потрібно обов’язково закривати;
  • Якщо атрибут href відсутній, тег <a> стає посиланням-заповнювачем, яке не виконує переходу;
  • Атрибут download не може бути використаний без href, оскільки він залежить від визначеного ресурсу.