Атрибут data-* тега <section>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <section>, не видимую пользователю, но доступную для JavaScript и CSS. Это особенно полезно для управления поведением разделов.
<section
data-component="news-feed"
data-load="lazy"
data-source="/api/news">
<h2>Лента новостей</h2>
<!-- Контент -->
</section>
Типичные data-атрибуты для секций:
| Атрибут | Пример значения | Назначение |
|---|---|---|
data-component |
"gallery", "user-profile" | Идентификация компонента |
data-source |
"/api/data" | URL для загрузки данных |
data-state |
"collapsed", "active" | Текущее состояние секции |
Пример с динамическим управлением:
<section
id="user-section"
data-user-id="12345"
data-role="admin">
<!-- Контент -->
</section>
<script>
const section = document.getElementById('user-section');
console.log('ID пользователя:', section.dataset.userId);
console.log('Роль:', section.dataset.role);
</script>
Стилизация через data-атрибуты:
<style>
section[data-state="active"] {
border-left: 3px solid #4CAF50;
}
section[data-role="admin"] {
background-color: #fff8e1;
}
</style>
Рекомендации по именованию:
- Используйте осмысленные имена в kebab-case
- Избегайте аббревиатур и сокращений
- Для сложных данных используйте JSON в одном атрибуте
- Придерживайтесь единого стиля в проекте
Ограничения:
- Значения всегда строковые (для чисел нужен parseInt)
- Не заменяют семантические HTML-атрибуты
- Избегайте хранения чувствительных данных
Примечание: Атрибуты data-* особенно полезны для:
- Компонентных фреймворков (React, Vue)
- Динамических интерфейсов
- Систем управления контентом
- Состояний и конфигураций элементов