Клавиша / esc

<abbr>

Правильный способ расшифровать аббревиатуры.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Пример

Скопировано

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

Некоторые браузеры подчёркивают текст внутри <abbr> пунктирной линией, а при наведении выводят всплывающую подсказку, в которой будет содержимое атрибута title. Но не все 🤔

        
          
          <p>  <abbr title="Организация объединённых наций">ООН</abbr>  — международная организация, созданная для  поддержания и укрепления международного  мира и безопасности, а также развития  сотрудничества между государствами.</p>
          <p>
  <abbr title="Организация объединённых наций">ООН</abbr>
  — международная организация, созданная для
  поддержания и укрепления международного
  мира и безопасности, а также развития
  сотрудничества между государствами.
</p>

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Скопировано

<abbr> можно использовать вместе с <dfn> для более формального описания определения:

        
          
          <p>  <dfn>    Организация объединённых наций    (<abbr title="Организация объединённых наций">ООН</abbr>)    — международная  организация, созданная для    поддержания и укрепления международного мира и безопасности,    а также развития сотрудничества между государствами.  </dfn></p>
          <p>
  <dfn>
    Организация объединённых наций
    (<abbr title="Организация объединённых наций">ООН</abbr>)
    — международная  организация, созданная для
    поддержания и укрепления международного мира и безопасности,
    а также развития сотрудничества между государствами.
  </dfn>
</p>

        
        
          
        
      
Открыть демо в новой вкладке

Доступность

Скопировано

Атрибут title для <abbr> полезен с точки зрения вёрстки, но абсолютно недоступен для пользователей клавиатуры и мобильных устройств. Подсказка из title не всплывает при клавиатурном фокусе и тапе.

Также у title есть проблемы с точки зрения взаимодействия пользователей мышек. Не всем понятно, что при наведении на слово с пунктирной линией всплывёт подсказка. К тому же легко забыть стилизовать аббревиатуры так, чтобы они не были похожи на ссылки.

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