Атрибут title тега <section>
Описание
Атрибут title добавляет всплывающую подсказку (tooltip) к элементу <section>. Подсказка появляется при наведении курсора на секцию и обычно содержит дополнительную информацию о содержимом.
<section title="Дополнительная информация о разделе">
<h2>Раздел с подсказкой</h2>
<p>Наведите курсор на эту секцию, чтобы увидеть подсказку.</p>
</section>
Особенности работы:
- Подсказка появляется через небольшой промежуток времени после наведения
- Исчезает автоматически при уходе курсора
- Поддерживает многострочный текст (с переносами строк)
- Внешний вид зависит от операционной системы и браузера
Рекомендации:
- Используйте для кратких пояснений (1-2 предложения)
- Дублируйте важную информацию в основном содержимом
- Для сложных подсказок используйте JavaScript-библиотеки
- Проверяйте отображение на разных устройствах
Ограничения:
- Не работает на сенсорных устройствах (без hover-состояния)
- Нельзя стилизовать стандартными средствами CSS
- Чрезмерное использование может раздражать пользователей
- Содержимое не индексируется поисковыми системами как основной контент
Пример с многострочной подсказкой:
<section title="Первая строка подсказки
Вторая строка подсказки
Третья строка">
<h2>Раздел с многострочной подсказкой</h2>
<p>Наведите курсор, чтобы увидеть подсказку в несколько строк.</p>
</section>
Альтернатива через CSS (псевдоэлементы):
<style>
.custom-tooltip {
position: relative;
}
.custom-tooltip:hover::after {
content: "Кастомная подсказка";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
}
</style>
<section class="custom-tooltip">
<h2>Раздел с CSS-подсказкой</h2>
<p>Наведите курсор, чтобы увидеть стилизованную подсказку.</p>
</section>
SEO комментарий:
Хотя поисковые системы учитывают текст в атрибуте title, не стоит использовать его для ключевых слов. Основной контент должен находиться в видимой части документа.
Доступность (a11y):
Для пользователей скринридеров текст в title может быть прочитан, но не всегда. Для важной информации используйте видимый текст или ARIA-атрибуты.