Тег HTML <abbr>
Тег HTML <abbr> определяет аббревиатуру или акроним — "HTML", "г.", "ASAP". Узнайте, как его использовать, с примерами W3Docs!
Тег HTML <abbr> обозначает аббревиатуру или акроним — сокращённую форму слова или фразы, например HTML, CSS, г., дек., ASAP или ATM. Заключив сокращённую форму в <abbr> и указав её полное раскрытие через атрибут title, вы превращаете набор букв в самодостаточный, машиночитаемый фрагмент контента.
На этой странице объясняется, для чего нужен <abbr>, почему он важен для доступности и SEO, как работает атрибут title (и в чём его ограничения), а также приведены лучшие практики его использования.
Почему важен <abbr>
Визуально <abbr> почти ничего не даёт — в некоторых браузерах он добавляет лишь слабое пунктирное подчёркивание. Его главная ценность — семантическая: он сообщает программному обеспечению, а не только зрячим читателям, что перед ними аббревиатура и что она означает.
- Экранные дикторы. Вспомогательные технологии могут зачитывать раскрытие из атрибута
titleили произносить аббревиатуру в соответствии с настройками пользователя. Это помогает людям, которые не видят всплывающую подсказку, понять акронимы типаWCAGилиARIA. - Поисковые системы и другие инструменты. Разметка аббревиатур даёт поисковым роботам, инструментам перевода и индексаторам дополнительный контекст о том, что означают ваши сокращения.
- Читатели, не знакомые с термином. Читатель, который не знает
ASAPили узкоспециализированный акроним, получает полное значение вместо того, чтобы догадываться.
Иными словами, просто HTML — это четыре буквы; <abbr title="HyperText Markup Language">HTML</abbr> — это четыре буквы плюс их смысл, доступный и людям, и машинам.
Синтаксис
Тег <abbr> используется парно. Содержимое записывается между открывающим (<abbr>) и закрывающим (</abbr>) тегами.
Пример тега HTML <abbr>:
Тег HTML <abbr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><abbr title="Universal Resource Locator">URL</abbr> - This is a specific way of designating an individual resource address on the Internet </p>
</body>
</html>Атрибут title
Тег <abbr> не имеет обязательных атрибутов, однако именно атрибут title делает его полезным. Поместите полную, раскрытую форму аббревиатуры в title:
<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for web pages.</p>В браузерах для настольных компьютеров при наведении курсора мыши на аббревиатуру отображается всплывающая подсказка с раскрытием. Экранные дикторы также могут показывать пользователям значение атрибута title.
Ограничения title
Всплывающая подсказка title удобна, но не стоит полагаться на неё как на единственный способ раскрытия значения для пользователей:
- Она появляется только при наведении мыши. Пользователи сенсорных устройств (телефонов, планшетов) и те, кто работает только с клавиатурой, как правило, не могут её вызвать.
- Отображение не согласовано у разных экранных дикторов и не гарантируется.
По этой причине Руководство по обеспечению доступности веб-контента (критерий успеха WCAG 3.1.4 Abbreviations) рекомендует также расшифровывать аббревиатуру в тексте при первом её использовании, а затем употреблять сокращённую форму:
<p>
The <abbr title="World Wide Web Consortium">W3C</abbr> (World Wide Web
Consortium) develops web standards. The W3C also maintains the HTML
specification.
</p>Таким образом смысл становится доступным для всех — а не только для тех, кто может навести курсор.
Атрибуты
Тег <abbr> поддерживает глобальные атрибуты и атрибуты событий. Наиболее важным из них является глобальный атрибут title, описанный выше.
Стилизация тега HTML <abbr>
По умолчанию некоторые браузеры отображают пунктирное подчёркивание под содержимым <abbr>, однако стилизация непоследовательна — например, в старых версиях некоторых браузеров подчёркивание не отображалось вовсе. Чтобы получить предсказуемый внешний вид, задайте стили самостоятельно с помощью CSS. Распространённый подход — пунктирная нижняя граница и курсор help, намекающий на наличие подсказки при наведении:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
abbr {
text-decoration: none;
border-bottom: 1px dotted #000;
cursor: help;
}
</style>
</head>
<body>
<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for documents designed to be displayed in a web browser.</p>
</body>
</html>Когда использовать <abbr> и лучшие практики
Используйте <abbr> всякий раз, когда сокращённая форма может быть непонятна каждому читателю, особенно при первом упоминании в тексте.
- Всегда указывайте
titleс полным раскрытием. Тег<abbr>безtitleпрактически бесполезен. - Расшифровывайте термин при первом использовании в видимом тексте (WCAG 3.1.4), а затем употребляйте аббревиатуру. Не делайте всплывающую подсказку
titleединственным источником значения. - Ограничивайте
titleтолько раскрытием — пишитеWorld Wide Web Consortium, а не развёрнутое предложение с объяснением. - Не злоупотребляйте разметкой. Нет необходимости оборачивать каждое вхождение широко известной аббревиатуры на странице; как правило, достаточно разметить первое.
- Используйте и для акронимов. В современном HTML нет отдельного элемента для акронимов —
<abbr>охватывает как аббревиатуры, так и акронимы.
Поддержка браузерами
Элемент <abbr> поддерживается всеми современными браузерами. Обратите внимание, что внешний вид по умолчанию различается: одни браузеры отображают пунктирное подчёркивание, другие не показывают ничего видимого. Если вам важен единообразный визуальный сигнал, примените собственные CSS-стили, как показано выше, вместо того чтобы полагаться на стиль браузера по умолчанию.
Связанные элементы
<acronym>— устаревший элемент для акронимов; вместо него используйте<abbr>.<dfn>— обозначает определяющее вхождение термина.<cite>— ссылается на название творческого произведения.