<abbr> HTML-элемент сокращения

Элемент <abbr> HTML представляет собой сокращение или акроним.

При первом использовании сокращения или акронима укажите полную расшифровку термина обычным текстом вместе с <abbr> для разметки сокращения. Это поможет пользователю понять значение сокращения или акронима.

Необязательный атрибут title может содержать расшифровку сокращения или акронима, если полная расшифровка не указана в тексте. Это подсказывает пользовательским агентам, как объявить или отобразить содержимое, и помогает всем пользователям понять значение сокращения. Если атрибут присутствует, title должен содержать только полное описание.

Попробуйте

<p>
  You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your
  <abbr>HTML</abbr> (HyperText Markup Language). Using style sheets, you can
  keep your <abbr>CSS</abbr> presentation layer and <abbr>HTML</abbr> content
  layer separate. This is called "separation of concerns."
</p>

abbr {
  font-style: italic;
  color: chocolate;
}

Атрибуты

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

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

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

Типичные случаи использования

Отмечать разметкой все сокращения с помощью <abbr> необязательно. Однако в некоторых случаях это полезно:

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

Грамматические особенности

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

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

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

Некоторые браузеры добавляют к содержимому элемента пунктирное подчеркивание. Другие добавляют пунктирное подчеркивание и отображают содержимое капителью. В некоторых браузерах элемент может выглядеть так же, как элемент <span>. Чтобы управлять этой стилизацией, используйте text-decoration и font-variant.

Доступность

При первом использовании акронима или сокращения на странице полезно написать его полную расшифровку, чтобы помочь людям понять его значение. Это особенно важно, если содержание посвящено технической теме или содержит профессиональный жаргон.

Добавляйте title только в том случае, если невозможно привести расшифровку сокращения или акронима в тексте. Различие между произносимым словом или фразой и тем, что отображается на экране, может сбивать с толку, особенно если читателю незнаком технический жаргон.

<p>
  JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight
  data-interchange format.
</p>

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

Примеры

Семантическая разметка сокращения

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

HTML

<p>Using <abbr>HTML</abbr> is fun and easy!</p>

Результат

Стилизация сокращений

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

HTML

<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>

CSS

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

Результат

Указание расшифровки

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

HTML

<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>

Результат

Определение сокращения

Можно использовать <abbr> вместе с <dfn>, чтобы дать более формальное определение сокращения, как показано в этом примере.

HTML

<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a
  markup language used to create the semantics and structure of a web page.
</p>

<p>
  A <dfn id="spec">Specification</dfn> (<abbr>spec</abbr>) is a document that
  outlines in detail how a technology or API is intended to function and how it
  is accessed.
</p>

Результат

Техническая сводка

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

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

См. также

• Использование элемента <abbr>