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

Описание

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

Пример использования:
<article title="Опубликовано 15 мая 2023, автор: Иван Иванов"> <h2>Новые тенденции в веб-разработке</h2> <p>Статья о современных подходах к созданию веб-приложений...</p> </article>

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

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

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

  • Используйте для краткой дополнительной информации о статье
  • Не дублируйте основной заголовок статьи
  • Избегайте слишком длинного текста (более 100 символов)
  • Не используйте для критически важной информации (не все пользователи увидят)
  • Для сложной разметки используйте JavaScript-решения вместо title

Правильное применение:

<article title="Статья получила 1245 просмотров и 32 комментария | Последнее обновление: 20.05.2023" > <h2>Лучшие практики CSS</h2> <p>Актуальные рекомендации по использованию каскадных таблиц стилей...</p> </article>

Ограничения: На мобильных устройствах подсказка title часто не отображается при касании, поэтому не следует полагаться на неё как на основной способ передачи важной информации.

Альтернативы для разных случаев:

Потребность Лучшее решение
Подробное описание Элемент <details> или скрытый блок
Богатая разметка JavaScript-всплывающие окна (tooltip библиотеки)
Доступность ARIA-атрибуты (aria-label, aria-describedby)
Мета-информация Видимые элементы в шапке или подвале статьи

Пример с ARIA-альтернативами:

<article aria-label="Статья о веб-доступности" aria-describedby="article-meta" > <h2>Основы ARIA</h2> <div id="article-meta" hidden> Автор: Мария Петрова | Дата публикации: 10.06.2025 | Категория: Разработка </div> <p>Введение в Accessible Rich Internet Applications...</p> </article>

Совет: Для создания современных всплывающих подсказок с анимацией и сложной разметкой используйте CSS-решения с псевдоэлементами или специализированные библиотеки типа Popper.js.

CSS-реализация кастомной подсказки:

<style> .article-tooltip { position: relative; } .article-tooltip:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 5px 10px; border-radius: 4px; white-space: nowrap; font-size: 14px; } </style> <article class="article-tooltip" data-tooltip="Рейтинг: 4.8 ★ | 56 отзывов"> <h2>Интерактивные подсказки на CSS</h2> <p>Как создать кастомные всплывающие подсказки без JavaScript.</p> </article>

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