Атрибут title тега <dfn>

Описание

Атрибут title добавляет всплывающую подсказку к элементу <dfn>, которая появляется при наведении курсора. Для терминов это может быть полезно для:

  • Краткого пояснения до прочтения полного определения
  • Указания языка или происхождения термина
  • Дополнительной справочной информации
Пример использования:
<dfn title="HyperText Markup Language">HTML</dfn> - язык разметки веб-страниц <dfn title="от англ. Cascading Style Sheets">CSS</dfn> - язык описания стилей <dfn title="Зарегистрированная торговая марка Oracle">JavaScript</dfn> - язык программирования

Особенности работы:

Платформа Поведение Доступность
Десктопные браузеры Подсказка появляется при наведении Только визуально
Мобильные устройства Часто недоступна Долгое нажатие может показать подсказку
Скринридеры Обычно озвучивают Зависит от настроек

Рекомендации по содержимому:

<!-- 1. Расшифровка аббревиатур --> <dfn title="Application Programming Interface">API</dfn> <!-- 2. Указание языка --> <dfn title="английский термин" lang="en">Framework</dfn> <!-- 3. Альтернативные названия --> <dfn title="Также известно как ECMAScript">JavaScript</dfn> <!-- 4. Источник определения --> <dfn title="По определению W3C">Веб-стандарты</dfn>

Ограничения и лучшие практики:

  • Не полагайтесь только на title для важной информации
  • Делайте подсказки краткими (1-2 предложения)
  • Для сложных подсказок используйте JavaScript-библиотеки (tooltips)
  • Дублируйте важную информацию в видимом тексте
  • Избегайте специальных символов и HTML-тегов в значении

Пример с CSS-стилизацией:

<style> dfn[title] { border-bottom: 1px dotted #666; cursor: help; } dfn[title]:hover { position: relative; color: #2b6cb0; } </style> <dfn title="Document Object Model">DOM</dfn> - представление HTML-документа

Альтернативы для лучшей доступности:

<dfn aria-describedby="dom-tooltip">DOM</dfn> <span id="dom-tooltip" class="visually-hidden">Document Object Model</span> <!-- Или с использованием JavaScript --> <dfn class="js-tooltip" data-tooltip="Document Object Model">DOM</dfn> <script> // Реализация кастомных тултипов с полным контролем </script>

SEO и совместимость:

  • Содержимое title может учитываться поисковыми системами
  • Не заменяет мета-описания и другие SEO-атрибуты
  • Поддерживается всеми браузерами, но с разным поведением
  • Не работает на сенсорных устройствах без дополнительного нажатия

Примечание: Хотя атрибут title удобен для быстрого добавления вспомогательной информации, для профессиональных словарей и глоссариев рассмотрите использование специализированных систем подсказок, которые гарантированно работают на всех устройствах и обеспечивают лучшую доступность.