<dfn>

Тег <dfn> используется для вывода терминов или расшифровки сокращений.

У <dfn> есть встроенная роль term. Скринридеры не рассказывают о роли, но зачитывают саму аббревиатуру и её расшифровку из title.

        
          
          <p>  <dfn><abbr>ЧАВО</abbr></dfn> — сокращённая форма  фразы «Часто задаваемые вопросы».  Используется на русскоязычных сайтах в качестве аналога  английской аббревиатуры <abbr>FAQ</abbr>.</p>
          <p>
  <dfn><abbr>ЧАВО</abbr></dfn> — сокращённая форма
  фразы «Часто задаваемые вопросы».
  Используется на русскоязычных сайтах в качестве аналога
  английской аббревиатуры <abbr>FAQ</abbr>.
</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В тег <dfn> оборачиваются сами термины, а их определения должны содержаться в ближайшем родительском теге <p>, <dl> или <section>.

По умолчанию браузеры применяют к тексту внутри <dfn> курсивное начертание с помощью font-style: italic.

<dfn> часто комбинируется с тегом <abbr> для раскрытия смысла аббревиатуры. В примере ниже оборачиваем «ЧАВО» в <abbr>, а при первом появлении нового термина добавляем <dfn>, указывая более точное определение. Для ссылок на это определение можно использовать тег <a>.

        
          
          <p>  <dfn id="chavo">    <abbr title="Часто задаваемые вопросы">ЧАВО</abbr>  </dfn> — сокращённая форма фразы «Часто задаваемые вопросы».</p><p>  Перед обращением в техподдержку убедитесь, что вы прочитали раздел  <a href="#chavo"><abbr title="Часто задаваемые вопросы">ЧАВО</abbr></a>  и там нет решения Вашей проблемы.</p>
          <p>
  <dfn id="chavo">
    <abbr title="Часто задаваемые вопросы">ЧАВО</abbr>
  </dfn> — сокращённая форма фразы «Часто задаваемые вопросы».
</p>
<p>
  Перед обращением в техподдержку убедитесь, что вы прочитали раздел
  <a href="#chavo"><abbr title="Часто задаваемые вопросы">ЧАВО</abbr></a>
  и там нет решения Вашей проблемы.
</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Помимо глобальных атрибутов у <dfn> есть атрибут title. Браузер обрабатывает этот атрибут по следующему алгоритму:

• если у элемента <dfn> есть атрибут title, то значение атрибута — это и есть термин, который будет раскрываться;
• если атрибута title нет, но у <dfn> есть ровно один вложенный элемент — <abbr> с атрибутом title — то термином будет значение title тега <abbr>;
• в любом другом случае термином считается текст внутри тега <dfn>.

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

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

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