Атрибут title тега <h3>
Описание
Атрибут title добавляет всплывающую подсказку к заголовкам <h1>-<h6>, которая появляется при наведении курсора. Это текстовое пояснение, видимое только пользователям.
<h1 title="Главная страница компании">Добро пожаловать</h1>
<h2 title="Акция действует до 31 декабря">Специальное предложение</h2>
<h3 title="Раздел находится в разработке">Новые продукты</h3>
Особенности работы:
| Платформа | Отображение | Задержка |
|---|---|---|
| Десктопные браузеры | Всплывающее окно при наведении | Около 1 секунды |
| Мобильные устройства | Часто не отображается | Нет реакции на касание |
| Скринридеры | Озвучивание подсказки | Зависит от настроек |
Рекомендации по использованию:
- Используйте для пояснения сокращений или сложных терминов
- Добавляйте к интерактивным элементам
- Делайте текст кратким (50-100 символов)
- Не дублируйте основной текст заголовка
- Не используйте как замену недостающего контента
Пример с CSS-стилизацией:
<style>
/* Стандартные подсказки нельзя стилизовать */
/* Альтернатива - кастомные тултипы через data-атрибуты */
h1[title]:hover::after {
content: attr(title);
position: absolute;
background: #333;
color: white;
padding: 5px 10px;
border-radius: 3px;
font-size: 14px;
}
</style>
<h1 title="Это стандартная подсказка">Заголовок с подсказкой</h1>
Ограничения и совместимость:
- Поддерживается всеми браузерами
- На мобильных устройствах часто не работает
- Нельзя стилизовать стандартное отображение
- Скринридеры могут не всегда озвучивать
- Не влияет на SEO напрямую
Примечание: Атрибут title полезен для дополнительных пояснений, но не должен заменять важный контент. Для сложных подсказок лучше использовать кастомные тултипы через JavaScript. Помните, что многие пользователи могут никогда не увидеть эти подсказки.