Использование data-* атрибутов: хранение пользовательских данных

Что такое data-атрибуты и зачем они нужны?

HTML5 подарил нам удобный способ хранить пользовательские данные прямо в разметке — data-* атрибуты. Это как карманы у куртки: положил что нужно — и всегда под рукой!

Синтаксис прост:

<button data-id="42" data-action="delete">Удалить</button>

Любой атрибут, начинающийся с data-, автоматически становится частью dataset объекта элемента.

Основные преимущества

✅ Семантика — чётко указываем, что это пользовательские данные
✅ Гибкость — можно хранить любые строковые значения
✅ Доступность — легко читаются и через JS, и через CSS
✅ Безопасность — не конфликтуют со стандартными атрибутами

Как работать с data-атрибутами в JavaScript

Доступ через свойство dataset — чисто и элегантно:

<div id="user" data-user-id="123" data-role="admin"></div>

<script>
  const user = document.getElementById('user');

  // Получаем значения
  console.log(user.dataset.userId); // "123"
  console.log(user.dataset.role);   // "admin"

  // Меняем значения
  user.dataset.role = 'moderator';
</script>

💡 Важно: в JavaScript имена преобразуются из kebab-case в camelCase (data-user-id → userId).

Практический пример: интерактивное меню

Создаём меню с подсказками без лишнего JS-кода:

<nav>
  <button data-tooltip="Главная страница" data-icon="🏠">Главная</button>
  <button data-tooltip="Ваши сообщения" data-icon="✉️">Сообщения</button>
</nav>

<style>
  [data-tooltip] {
    position: relative;
  }

  [data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    /* Стили подсказки */
  }
</style>

<script>
  document.querySelectorAll('[data-icon]').forEach(btn => {
    btn.prepend(btn.dataset.icon + ' ');
  });
</script>

Data-атрибуты и CSS — мощный дуэт

CSS может читать эти атрибуты через attr() и использовать для стилизации:

<div data-rating="4">Рейтинг: 4/5</div>

<style>
  [data-rating]::after {
    content: " ★★★★★";
    color: gold;
    width: calc(20% * attr(data-rating number));
  }
</style>

Когда стоит использовать?

🔹 Для хранения ID и метаданных
🔹 Для конфигурации виджетов
🔹 Для передачи данных между JS и CSS
🔹 Для создания микровзаимодействий

⚠️ Не используйте для: - Критически важных данных (они видны в HTML) - Больших объёмов данных - Чувствительной информации

Продвинутый приём: JSON в data-атрибутах

Для сложных структур можно хранить JSON:

<div data-user='{"id":42,"name":"Данила"}'></div>

<script>
  const user = JSON.parse(document.querySelector('div').dataset.user);
</script>

Лучшие практики

Именование — используйте осмысленные имена (data-product-price вместо data-pp)
Минимизация — не превращайте HTML в хранилище данных
Валидация — проверяйте наличие атрибутов в JS
Производительность — избегайте частых обновлений dataset

Итог

Data-атрибуты — это:

✨ Простота использования
✨ Гибкость применения
✨ Элегантная интеграция с JS/CSS

Попробуйте применить их в своём следующем проекте — и вы оцените их мощь! Для углублённого изучения HTML-технологий загляните на канал Данилы Бежина.