Тег abbr (от английского abbreviation, «сокращение») отмечает аббревиатуру или сокращение, например HTML или СМИ. Тег парный, закрывающий обязателен. Собственных атрибутов у него нет, но почти всегда используют глобальный атрибут title: в нём записывают расшифровку. Устаревший тег acronym заменён на abbr.
Ниже разобрано, что такое тег abbr, как записать расшифровку, почему подсказку не видно на телефоне, когда достаточно первого упоминания и как оформить сокращение в CSS.
<p>Оформление отчёта описано в <abbr title="государственный стандарт">ГОСТ</abbr> 7.32.</p>В этой статье
- Тег abbr в HTML: что это и для чего нужен
- Атрибут title в теге abbr: как записать расшифровку
- Подсказка тега abbr: почему её не видно на телефоне
- Когда оборачивать аббревиатуру в abbr: первое упоминание и повторы
- Тег abbr и dfn: как записать определение аббревиатуры
- Стили тега abbr: пунктир, цвет и курсор
- Частые ошибки с тегом abbr
Тег abbr в HTML: что это и для чего нужен
Аббревиатура - слово, составленное из первых букв или частей слов: «ГОСТ», «ПК», «ТВ». Тег abbr сообщает, что перед читателем сокращение, и позволяет привязать к нему расшифровку. Сам по себе тег ничего не объясняет: без title браузер не выделяет его никак.
Отмечать тегом нужно не каждую аббревиатуру, а ту, которая может быть непонятна читателю: узкие профессиональные сокращения, названия стандартов. Общеизвестные вроде «ТВ» или «США» в abbr можно не оборачивать. Стандарт описывает тег в разделе спецификации WHATWG, а справка MDN хорошо показывает разные случаи.
Атрибут title в теге abbr: как записать расшифровку
В title записывают только расшифровку, без пояснений и определений: title="Cascading Style Sheets", а не title="язык стилей для страниц". Если пояснение нужно, его пишут в тексте.
Если расшифровка уже есть в предложении, title не нужен: достаточно записать её рядом, а само сокращение отметить пустым abbr.
Число в расшифровке должно совпадать с числом в тексте. Если окончание множественного числа записано внутри abbr («ГОСТы»), расшифровка тоже во множественном числе. Если окончание записано снаружи, после закрывающего тега, расшифровка остаётся в единственном числе.
Пример: число в расшифровке
Кнопки переключают запись предложения. В блоке «Запись в файле» видна разметка, ниже - предложение и то, какая расшифровка записана в title и где находится окончание.
Есть и ловушка: пустой title="" браузер подчёркивает пунктиром так же, как настоящий, а подсказки у него нет. Если расшифровки нет, атрибут не записывают.
Расшифровка из title не попадает в копию: при выделении абзаца в буфер обмена попадает только сама аббревиатура.
Подсказка тега abbr: почему её не видно на телефоне
Подсказку показывает браузер, когда над сокращением держат курсор мыши. На телефоне курсора нет, а нажатие подсказку не открывает. Не откроется она и при переходе по странице клавишей Tab. Стандарт прямо советует расшифровывать незнакомые сокращения в тексте, а не полагаться на title.
Надёжный способ: записать расшифровку при первом упоминании в самом предложении, в скобках, а abbr без title оставить для отметки сокращения.
<p>Стили описывает язык каскадных таблиц стилей (<abbr>CSS</abbr>).</p>Пример: что увидит читатель
Три абзаца с одним сокращением. Наведите курсор на каждое: подсказку показывает только запись с title, и только мышь. Кадр сам определяет, доступно ли наведение на вашем устройстве.
Когда оборачивать аббревиатуру в abbr: первое упоминание и повторы
Каждый abbr работает независимо от остальных: стандарт не требует оборачивать все упоминания сокращения и не запрещает этого. Обычно расшифровку записывают при первом упоминании, а повторы оставляют без тега. Иначе текст покрывается пунктирными линиями, и читателю трудно понять, какие из них что-то сообщают.
Если аббревиатура встречается далеко от первого упоминания, например в новом разделе длинной статьи, расшифровку можно записать ещё раз.
Пример: где оставить abbr
Нажимайте на слово HTML в абзаце: у каждого упоминания тег включается и выключается. Ниже видна разметка, число обёрнутых упоминаний и оценка получившегося варианта.
Тег abbr и dfn: как записать определение аббревиатуры
Когда аббревиатуру определяют, то есть впервые вводят в тексте, её оборачивают в dfn, а внутрь записывают abbr с расшифровкой.
<p><dfn><abbr title="Web Content Accessibility Guidelines">WCAG</abbr></dfn> - рекомендации по доступности веб-контента.</p>Тег dfn по умолчанию выводится курсивом, и abbr внутри него наследует курсив. Если расшифровка записана прямо в определении, title можно не писать: <dfn>Web Content Accessibility Guidelines (<abbr>WCAG</abbr>)</dfn>.
Стили тега abbr: пунктир, цвет и курсор
Пунктирное подчёркивание браузер рисует только у abbr с атрибутом title, у тега без него оформления нет. Курсор остаётся обычной стрелкой, поэтому читатель может не понять, что линия что-то значит. Курсор меняют правилом cursor: help.
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}Убирать подчёркивание совсем не стоит: без него никто не догадается, что у сокращения есть подсказка. Пунктир должен отличаться от ссылок цветом и видом, иначе читатель примет расшифровку за ссылку.
Пример: как выглядит abbr в разных стилях
Кнопки меняют правило CSS. Кадр сам измеряет, какое подчёркивание и какой курсор получили сокращение с title, такое же без title и ссылка рядом для сравнения.
Частые ошибки с тегом abbr
Ошибки с этим тегом связаны с содержимым title и с ожиданием, что подсказку увидят все.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Пояснение вместо расшифровки: title="язык стилей для страниц" | В title должна быть только расшифровка, пояснение находится в тексте | title="Cascading Style Sheets" |
Пустой title="" | Пунктир есть, а подсказки нет | Убрать атрибут |
Число в расшифровке не совпадает с текстом: «ГОСТы» и title="государственный стандарт" | Читатель видит множественное число, а подсказка говорит об одном | Окончание внутри тега - расшифровка во множественном, снаружи - в единственном |
Незнакомое сокращение отмечено только через title | На телефоне и без мыши расшифровки не видно | Записать расшифровку в тексте при первом упоминании |
Каждое упоминание обёрнуто в abbr с title | Текст покрыт пунктиром, повторы читателю ничего не дают | title при первом упоминании, повторы без тега |
abbr ради пунктира у обычного слова | Тег обещает «это сокращение», а там оформление | span с классом и text-decoration |
Подчёркивание убрано: abbr { text-decoration: none } | Читатель не догадается, что у сокращения есть подсказка | Оставить пунктир и добавить cursor: help |
Тег acronym | Тег устарел, браузеры его ещё выводят, но он не входит в стандарт | Тег abbr |
| Ждут расшифровку в скопированном тексте | Значение title при копировании не попадает в буфер | Записать расшифровку в тексте |
