Атрибут data-* тега <html>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в корневом элементе <html> документа. Эти пользовательские атрибуты могут быть использованы JavaScript и CSS для хранения конфигурации или состояния всего документа.
<!DOCTYPE html>
<html lang="ru"
data-theme="dark"
data-page="home"
data-analytics-enabled="true">
<!-- Содержимое страницы -->
</html>
Особенности именования:
| Формат | Пример | Недопустимо |
|---|---|---|
| Префикс data- | data-app-version |
app-version |
| Kebab-case | data-user-id |
data.user.id |
| Латинские буквы | data-page-index |
data-страница |
Доступ из JavaScript:
<script>
// Получение данных
const theme = document.documentElement.dataset.theme;
console.log('Текущая тема:', theme);
// Установка данных
document.documentElement.dataset.userLoggedIn = "true";
document.documentElement.dataset.pageLoadTime = new Date().toISOString();
</script>
Использование в CSS:
<style>
/* Стили для темной темы */
html[data-theme="dark"] {
background: #222;
color: #fff;
}
/* Специфичные стили для главной страницы */
html[data-page="home"] header {
background: #3498db;
}
</style>
Пример с JSON данными:
<html data-config='{"debug":true,"version":"1.2.3"}'>
<script>
const config = JSON.parse(document.documentElement.dataset.config);
if (config.debug) {
console.log('Версия приложения:', config.version);
}
</script>
Рекомендации по использованию:
- Используйте для:
- Хранения глобальных настроек приложения
- Передачи конфигурации из бэкенда
- Управления темами оформления
- Отслеживания состояния документа
- Избегайте:
- Хранения больших объемов данных
- Критически важной информации
- Дублирования контента, видимого пользователю
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Значения всегда строковые (требуют преобразования)
- Не влияет на SEO напрямую
- Доступен через API dataset
- Максимальная длина значения зависит от браузера
Примечание: Хотя data-атрибуты в <html> предоставляют удобный способ хранения глобальных данных, для сложных приложений рассмотрите использование JavaScript-объектов конфигурации или специализированных решений для управления состоянием.