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

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

<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;
}

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

Атрибуты

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

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

Результат

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

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

HTML

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

CSS

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

Результат

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

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

HTML

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

Result

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

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

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

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

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

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

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

• Использование элемента <abbr>
• Другие элементы, являющиеся семантически текстовыми: <a>, <em>, <strong>, <small>, <cite>, <q>, <dfn>, <time>, <code>, <var>, <samp>, <kbd>, <sub>, <sup>, <b>, <i>, <mark>, <ruby>, <rp>, <rt>, <bdo>, <span>, <br>, <wbr>.
• Устаревший элемент <acronym>, который был заменён элементом <abbr>.