Атрибут title тега <main>
Описание
Атрибут title для тега <main> добавляет всплывающую подсказку, которая отображается при наведении курсора на основной контент страницы. Это глобальный атрибут HTML, который может использоваться для предоставления дополнительной информации.
<main title="Основное содержимое страницы | Версия 1.2">
<h1>Главный раздел</h1>
<p>Наведите курсор на эту область, чтобы увидеть подсказку.</p>
</main>
Особенности работы:
| Аспект | Описание | Примечание |
|---|---|---|
| Отображение | Всплывающая подсказка при наведении | Зависит от браузера и ОС |
| Содержимое | Только текст (HTML не интерпретируется) | Максимально 1-2 строки |
| Доступность | Частично поддерживается скринридерами | Не заменяет ARIA-атрибуты |
Рекомендации по использованию:
- Используйте для кратких пояснений (до 100 символов)
- Избегайте важной информации только в title
- Не злоупотребляйте - только для дополнительных пояснений
- Для сложного контента используйте специализированные тултипы
Пример с доступной реализацией:
<main title="Основной контент страницы" aria-describedby="main-desc">
<span id="main-desc" hidden>Содержит главные статьи и материалы сайта</span>
<!-- Контент -->
</main>
Ограничения:
- Не работает на сенсорных устройствах
- Ограниченное форматирование текста
- Может конфликтовать с кастомными тултипами
- Не влияет на SEO
Альтернативы для сложных случаев:
<main>
<div class="tooltip-container">
<!-- Контент -->
<div class="custom-tooltip">Расширенное описание с HTML-разметкой</div>
</div>
</main>
<style>
.tooltip-container { position: relative; }
.custom-tooltip {
display: none;
position: absolute;
/* Стили для тултипа */
}
.tooltip-container:hover .custom-tooltip {
display: block;
}
</style>
Примечание: Хотя атрибут title прост в использовании, для современных веб-интерфейсов рекомендуется реализовывать кастомные решения для подсказок, которые обеспечивают лучший контроль над отображением и доступностью.