Атрибут title тега <header>
Описание
Атрибут title добавляет всплывающую подсказку-тултип для тега <header>, которая появляется при наведении курсора. Подсказка содержит дополнительную текстовую информацию.
<header title="Основная шапка сайта | Версия 2.1">
<h1>Мой сайт</h1>
<nav>...</nav>
</header>
Особенности отображения:
| Платформа | Поведение | Время появления |
|---|---|---|
| Десктопные браузеры | Всплывающая подсказка при наведении | ~1 секунда |
| Мобильные устройства | Часто не отображается | - |
| Скринридеры | Озвучивание подсказки | Зависит от настроек |
Рекомендации по содержимому:
<header title="Главное меню: Домашняя страница | Контакты | О нас">
<!-- Навигация -->
</header>
<!-- Плохой пример (избыточно) -->
<header title="Это шапка сайта, которая содержит логотип и главное меню навигации...">
<!-- Навигация -->
</header>
Советы по использованию:
- Используйте для:
- Пояснения функциональности
- Дополнительной информации
- Технических подсказок (версия, статус)
- Избегайте:
- Дублирования видимого текста
- Слишком длинных текстов
- Критически важной информации (не все увидят)
- Оптимальная длина: 50-100 символов
Ограничения и альтернативы:
<style>
.custom-tooltip {
position: relative;
}
.custom-tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
top: 100%;
left: 0;
white-space: nowrap;
}
</style>
<header class="custom-tooltip" data-tooltip="Кастомная подсказка">
<h1>Заголовок с улучшенной подсказкой</h1>
</header>
Доступность и SEO:
- Подсказки озвучиваются скринридерами
- Не влияют напрямую на SEO
- Не заменяют атрибуты alt для изображений
- Не должны содержать важный для индексации контент
Примечание: Хотя атрибут title полезен для дополнительных пояснений, не стоит полагаться на него как на основной способ передачи важной информации. Для сложных подсказок рассмотрите использование специализированных библиотек тултипов или кастомных решений на CSS/JavaScript.