Тег <abbr> — сокращение или аббревиатура
Тег <abbr> (от англ. abbreviation) используется для обозначения сокращений и аббревиатур в HTML. Он позволяет добавить всплывающую подсказку с расшифровкой, что улучшает доступность и понимание текста.
Синтаксис
<abbr title="Полное объяснение">Сокращение</abbr>Примеры:
<abbr title="HyperText Markup Language">HTML</abbr>
<abbr title="Соединённые Штаты Америки">США</abbr>
<abbr title="Национальное аэрокосмическое агентство">NASA</abbr>Основные атрибуты
| Атрибут | Описание |
|---|---|
title | Обязательный – содержит полное описание сокращения (отображается при наведении). |
class, id, style | Могут использоваться для дополнительной стилизации. |
Поддержка браузерами
✅ Полная поддержка во всех современных браузерах:
- Chrome
- Firefox
- Safari
- Edge
- Opera
✅ Работает в Internet Explorer (с IE6+)
🛈 Особенности:
- В некоторых браузерах (например, Firefox) сокращение по умолчанию подчёркивается пунктиром.
- В IE старых версий подсказка (
title) может отображаться не так, как в современных браузерах.
Примеры использования
1. Базовая аббревиатура
<abbr title="World Wide Web">WWW</abbr> — это глобальная сеть.Результат:
WWW — это глобальная сеть. (при наведении покажет «World Wide Web»)
2. Стилизация через CSS
<style>
abbr {
cursor: help; /* Курсор "вопросительный знак" */
text-decoration: dotted underline; /* Пунктирное подчёркивание */
}
</style>
<abbr title="Cascading Style Sheets">CSS</abbr> используется для стилизации страниц.3. Использование в сложных терминах
<abbr title="Artificial Intelligence">AI</abbr> и <abbr title="Machine Learning">ML</abbr> меняют мир.Зачем использовать <abbr>?
- Улучшает доступность (скрин-ридеры зачитывают расшифровку).
- Помогает пользователям (подсказка при наведении).
- Полезно для SEO (поисковики лучше понимают контекст).