<abbr>: Элемент Аббревиатура

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Элемент HTML «аббревиатура» (<abbr>) представляет собой аббревиатуру и, опционально, может показывать её расшифровку. Расшифровка записывается в атрибут title. Иные значения title, кроме расшифровки аббревиатуры не допускаются.

Интерактивный пример

Статья Как помечать аббревиатуры и сделать их потянутыми поможет понять как использовать <abbr> и связанные элементы.

Категории контента Основной поток, текстовый контент, явный контент
Допустимое содержимое Фразовый контент
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любые, поддерживающие фразовый контент.
Допустимые ARIA-роли Любые
DOM-интерфейс HTMLElement

Атрибуты

Этот элемент поддерживает только глобальные атрибуты. Атрибут title имеет специальное семантическое значение, когда используется вместе с элементом <abbr>. Он должен содержать полную расшифровку или описание аббревиатуры.

Каждый элемент <abbr> независим от других. Указание title на одном элементе не применяет это же описание к другим элементам с одинаковым содержанием.

Примечания по использованию

Обычное использование

Необязательно помечать все аббревиатуры с помощью <abbr>. Далее представлено несколько вариантов, которые помогут выбрать как помечать текст:

  • Когда используете аббревиатуру и хотите показать описание или расшифровку вне основного потока содержания, используйте <abbr> c подходящим title.
  • Чтобы обозначить аббревиатуру, которая может быть незнакома читателю, используете <abbr> с атрибутом title или просто текст с описанием.
  • Когда присутствие аббревиатуры в тексте должно быть семантически выделено, полезен элемент <abbr>. В свою очередь, его использование может быть использовано для стилизации или написания сценариев.
  • Вы можете использовать <abbr> вместе с <dfn>, чтобы установить определения для терминов, которые являются аббревиатурами или акронимами. Смотрите пример Определение в аббревиатуре ниже.

Грамматические вопросы

В языках с падежами (то есть, языки, в которых количество предметов влияет на грамматику предложения), используйте одинаковое грамматическое число в атрибуте title и внутри элемента <abbr>. Это также имеет место в языках с более чем двумя грамматическими числами (например, арабский имеет не только категории единственного и множественного числа, но двойственного).

Стили по умолчанию

Назначение данного элемента исключительно для удобства автора и браузеры отображают его как (display: inline) по умолчанию, хотя его стиль по умолчанию меняется в разных браузерах:

  • Некоторые браузеры, например Internet Explorer, стилизуют его как элемент <span>.
  • Opera, Firefox и другие добавляют подчёркивание точками к содержанию элемента.
  • Некоторые браузеры не только подчёркивают, но и меняют начертание на капитель (small caps). Чтобы избежать этого, добавьте font-variant: none в ваш CSS.

Примеры

Семантическая пометка аббревиатуры

Чтобы пометить аббревиатуру без задания описания или расшифровок, просто используйте <abbr> без каких-либо атрибутов, как показано в примере ниже.

HTML

html
<p>Использование <abbr>HTML</abbr> – весело и легко!</p>

Результат

Стилизация аббревиатуры

Вы можете использовать CSS, чтобы задать пользовательские стили для аббревиатуры, как показано в примере ниже.

HTML

html
<p>Используя <abbr>CSS</abbr>, вы можете стилизовать аббревиатуры!</p>

CSS

css
abbr {
  font-variant: all-small-caps;
}

Результат

Задание расшифровки

Добавление атрибута title даёт вам возможность задать расшифровку или описание для аббревиатуры или акронима.

HTML

html
<p>
  Эта статья великолепна!
  <abbr title="Подпишусь под Каждым Словом">ППКС</abbr> без раздумий.
</p>

Result

Определение в аббревиатуре

Вы можете использовать <abbr> вместе с <dfn> для более формального определения аббревиатуры, как показано ниже.

HTML

html
<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> –
  язык разметки, который используется для создания семантических и
  структурированных веб-страниц.
</p>

<p>
  A <dfn id="spec">Specification</dfn> (<abbr title="Specification">spec</abbr>)
  – документ, в котором описаны основные принципы работы технологи или API и как
  получить к ним доступ.
</p>

Result

Смотрите больше примеров в статье Как размечать аббревиатуры и делать их понятными.

Спецификации

Specification
HTML
# the-abbr-element

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
abbr

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Смотрите также