Кратко
СкопированоТег <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
.