Атрибут data-* тега <h3>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в заголовках <h1>-<h6>. Эти пользовательские атрибуты не влияют на отображение, но могут быть использованы JavaScript или CSS.
<h1 data-page="home" data-version="2.1.3">Главная страница</h1>
<h2 data-section="about" data-priority="high">О компании</h2>
<h3 data-collapsible="true">Наша команда</h3>
Синтаксис и правила именования:
| Правило | Пример | Недопустимо |
|---|---|---|
| Префикс data- | data-id |
dataId (без дефиса) |
| Любые буквы после data- | data-user-id |
data-123 (начинается с цифры) |
| Регистрозависимость | data-section ≠ data-Section |
- |
Доступ к данным через JavaScript:
<h2 data-section="products" data-items="5">Наши продукты</h2>
<script>
const heading = document.querySelector('h2');
// Чтение данных
console.log(heading.dataset.section); // "products"
console.log(heading.dataset.items); // "5"
// Изменение данных
heading.dataset.items = '7';
// Добавление новых данных
heading.dataset.loaded = 'true';
</script>
Использование в CSS:
<style>
h1[data-version="2.0"] {
color: red;
text-decoration: underline;
}
h2[data-priority="high"]::after {
content: " (Важно!)";
color: #e74c3c;
}
</style>
<h1 data-version="2.0">Старая версия</h1>
<h2 data-priority="high">Срочное обновление</h2>
Практические применения:
- Хранение ID для динамической загрузки контента
- Управление состоянием (свернуто/развернуто)
- Метки для аналитики и тестирования
- Конфигурация компонентов
- Интеграция с JavaScript-фреймворками
Рекомендации:
- Используйте осмысленные имена атрибутов
- Храните только простые данные (для сложных структур используйте JSON)
- Избегайте дублирования видимого контента
- Не злоупотребляйте - только для действительно нужных данных
Примечание: Атрибуты data-* особенно полезны для заголовков в SPA-приложениях, где они могут хранить состояние или мета-информацию, необходимую для работы JavaScript, без влияния на отображаемый текст.