Тег <abbr>

Тег <abbr> (укр. — “абревіатура”) використовується в HTML для позначення скорочень, абревіатур або акронімів. Його головна функція — надати розшифровку скорочення, яка відображається як підказка при наведенні курсору. Це покращує доступність контенту, особливо для новачків, скрінрідерів і пошукових систем.

Атрибути

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

  • title — обов’язковий для правильної роботи тега. Вказує повну розшифровку скорочення, яка з’являється при наведенні. Наприклад:
<p>Мій брат працює у <abbr title="International Business Machines">IBM</abbr>.</p>

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

Тег <abbr> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор елемента. Наприклад:
<abbr id="html" title="HyperText Markup Language">HTML</abbr>
  • class — задає класи для стилізації елемента. Наприклад:
<abbr class="term" title="Cascading Style Sheets">CSS</abbr>
  • style — дозволяє додати інлайн-стилі. Наприклад:
<abbr title="Search Engine Optimization" style="border-bottom: 1px dotted #888;">SEO</abbr>
  • lang — вказує мову вмісту елемента. Наприклад:
<abbr title="Représentant des Étudiants" lang="fr">RE</abbr>

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

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання abbr</title>
    <style>
        abbr {
            text-decoration: underline dotted;
            cursor: help;
        }
    </style>
</head>
<body>
    <p>У курсі ми вивчаємо <abbr title="HyperText Markup Language">HTML</abbr>, <abbr title="Cascading Style Sheets">CSS</abbr> та <abbr title="JavaScript">JS</abbr>.</p>
</body>
</html>

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

  • Тег <abbr> корисний для підвищення зрозумілості тексту, особливо для новачків у технічних темах.
  • Допомагає в SEO — пошукові системи можуть краще інтерпретувати значення скорочень.
  • Рекомендується використовувати title завжди — без нього <abbr> не має сенсу і працює як звичайний інлайновий елемент без функціоналу підказки.
  • Скрінрідери можуть оголошувати скорочення з відповідною розшифровкою, що покращує доступність.
  • Відображення можна кастомізувати через CSS (наприклад, додати стилі підказки або курсора).
  • Підтримується всіма сучасними браузерами.