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

Описание

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

Пример использования:
<dl> <dt>HTML</dt> <dd title="Первая версия вышла в 1993 году"> Язык гипертекстовой разметки </dd> <dt>CSS</dt> <dd title="Cascading Style Sheets - текущая версия CSS3"> Каскадные таблицы стилей </dd> </dl>

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

Характеристика Описание
Отображение Всплывающая подсказка при наведении (зависит от браузера)
Доступность Частично доступен для скринридеров (не надежный)
Содержимое Только текст (HTML не интерпретируется)
Длина Ограничена, может обрезаться в некоторых браузерах

Рекомендации по использованию:

  • Используйте для кратких дополнительных пояснений
  • Избегайте важной информации - не все пользователи увидят подсказку
  • Для мобильных устройств предусмотрите альтернативные способы отображения
  • Сочетайте с ARIA-атрибутами для лучшей доступности
  • Не дублируйте основной контент в подсказке

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

<style> /* Стиль для элементов с подсказкой */ dd[title]:hover { cursor: help; text-decoration: underline dotted; } /* Альтернатива для мобильных устройств */ @media (hover: none) { dd[title]::after { content: " (ℹ)"; color: #0066cc; } } </style> <dl> <dt>JavaScript</dt> <dd title="Создан Бренданом Айком за 10 дней в 1995 году"> Язык программирования для веб-страниц </dd> </dl>

Сравнение с другими способами подсказок:

Метод Преимущества Недостатки
Атрибут title Простота использования, встроен в HTML Ограниченная доступность, нет контроля над стилями
CSS-тултипы Полный контроль над стилем и поведением Требует дополнительной разметки и CSS
JavaScript-всплывашки Максимальная гибкость и функциональность Сложность реализации, влияние на производительность

Доступность (a11y):

  • Не полагайтесь только на title для важной информации
  • Для сложных подсказок используйте комбинацию с aria-describedby
  • Помните, что на сенсорных устройствах подсказки не работают при наведении
  • Тестируйте с различными скринридерами

Пример с JavaScript:

<dl> <dt>API</dt> <dd id="api-def" title="Application Programming Interface"> Интерфейс программирования приложений </dd> </dl> <script> // Дополнительный контроль для мобильных устройств const apiDef = document.getElementById('api-def'); apiDef.addEventListener('click', function() { if (matchMedia('(hover: none)').matches) { alert(this.title); } }); </script>

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