<abbr>: Элемент сокращения

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

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

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

Этот элемент поддерживает только глобальные атрибуты. Атрибут 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>