Атрибут data-* тега <header>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в теге <header>, не влияя на его отображение. Эти пользовательские атрибуты используются для передачи данных в JavaScript и CSS.
<header data-page-type="homepage"
data-scroll-threshold="200"
data-theme="dark">
<!-- Шапка сайта -->
</header>
Особенности именования:
| Формат | Правильный пример | Неправильный пример |
|---|---|---|
| Префикс data- | data-user-role |
user-role |
| Kebab-case | data-scroll-threshold |
data_scroll_threshold |
| Латинские буквы | data-pageindex |
data-страница |
Доступ из JavaScript:
<header id="mainHeader" data-active="true" data-user-type="admin">
<!-- Контент шапки -->
</header>
<script>
const header = document.getElementById('mainHeader');
// Чтение данных
console.log(header.dataset.active); // "true"
console.log(header.dataset.userType); // "admin"
// Запись данных
header.dataset.active = "false";
header.dataset.lastUpdated = "2023-11-15";
</script>
Использование в CSS:
<style>
header[data-theme="dark"] {
background-color: #222;
color: white;
}
header[data-sticky="true"] {
position: sticky;
top: 0;
z-index: 100;
}
</style>
<header data-theme="dark" data-sticky="true">
<h1>Темная липкая шапка</h1>
</header>
Рекомендации по использованию:
- Используйте для:
- Хранения состояния компонента
- Передачи конфигурационных параметров
- Интеграции с JavaScript-плагинами
- Избегайте:
- Хранения больших объемов данных
- Критически важной информации
- Дублирования видимого контента
- Для сложных данных используйте JSON в одном атрибуте
Пример с JSON данными:
<header data-page-info='{"id":42,"author":"John","tags":["web","design"]}'>
<!-- Шапка сайта -->
</header>
<script>
const pageInfo = JSON.parse(document.querySelector('header').dataset.pageInfo);
console.log(pageInfo.tags); // ["web", "design"]
</script>
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Значения всегда строковые (требуют преобразования)
- Не влияет на SEO напрямую
- Доступен через API dataset
- Максимальная длина значения зависит от браузера
Примечание: Атрибуты data-* - это мощный инструмент для создания интерактивных компонентов без использования дополнительных JavaScript-переменных. Они особенно полезны при работе с фреймворками, где нужно передавать данные между HTML и JavaScript.