HTML5 data-атрибуты (data-*): практическое руководство с примерами

Data-атрибуты (data-*) в HTML5 позволяют хранить небольшие фрагменты данных непосредственно в разметке и удобно использовать их в JavaScript и CSS. Это отличный инструмент для верстальщиков и фронтендеров, когда нужен лёгкий способ передать конфигурацию, состояние или идентификаторы без лишних запросов к серверу и глобальных переменных.

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

Любой атрибут вида data-имя является валидным и доступен в JS через свойство dataset. Пример:

<button class="btn" data-action="buy" data-product-id="42" data-tooltip="Купить сейчас">Купить</button>

const btn = document.querySelector('.btn');
console.log(btn.dataset.action);     // "buy"
console.log(btn.dataset.productId);  // "42" (строка)

Здесь мы храним тип действия, ID товара и подсказку, а затем читаем эти данные на стороне JavaScript.

Синтаксис и правила именования

const el = document.querySelector('[data-user-id]');

// Чтение
console.log(el.dataset.userId); // "123"

// Запись
el.dataset.state = 'active';     // => data-state="active"

// Удаление
delete el.dataset.userId;        // убирает атрибут data-user-id

Data-атрибуты в CSS: состояния и подсказки

Data-атрибуты удобно использовать для стилизации состояний и небольших подсказок.

<div class="tab" data-state="active">Профиль</div>
<div class="tab" data-state="inactive">Настройки</div>

.tab[data-state="active"] { color: #0a7; border-bottom: 2px solid #0a7; }
.tab[data-state="inactive"] { color: #777; }

/* Подсказка через attr() */
.tooltip {
  position: relative;
}
.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute; left: 0; top: 100%;
  background: #000; color: #fff; padding: 6px 8px; border-radius: 4px;
  white-space: nowrap; transform: translateY(6px);
}

Передача конфигурации компоненту через JSON в data-*

Компактный способ передать настройки компоненту — хранить JSON в атрибуте. Рекомендуется использовать один атрибут data-options и парсить его в JS.

<div class="carousel" 
     data-options='{"autoplay": true, "delay": 3000, "easing": "ease-out"}'></div>

const root = document.querySelector('.carousel');
let options = {};
try {
  options = JSON.parse(root.dataset.options || '{}');
} catch (e) {
  console.warn('Некорректный JSON в data-options', e);
}

console.log(options.autoplay, options.delay, options.easing);

Важно: экранируйте кавычки в HTML, как в примере выше, или используйте одиночные кавычки для атрибута и двойные — внутри JSON.

Делегирование событий по data-action

Удобный паттерн: вешаем один обработчик на контейнер и по data-action понимаем, что делать.

<div id="products">
  <button data-action="buy" data-product-id="42">Купить</button>
  <button data-action="favorite" data-product-id="42">В избранное</button>
</div>

const box = document.getElementById('products');
box.addEventListener('click', (e) => {
  const btn = e.target.closest('[data-action]');
  if (!btn || !box.contains(btn)) return;

  const { action, productId } = btn.dataset;
  switch (action) {
    case 'buy':
      buyProduct(productId);
      break;
    case 'favorite':
      toggleFavorite(productId);
      break;
  }
});

Переключение темы через data-theme

Паттерн для тёмной темы: храним состояние в data-theme на корневом элементе и меняем палитру через CSS-переменные.

<button id="themeToggle">Тема</button>

:root[data-theme="light"] {
  --bg: #ffffff; --fg: #151515;
}
:root[data-theme="dark"] {
  --bg: #151515; --fg: #f5f5f5;
}
body { background: var(--bg); color: var(--fg); }

const root = document.documentElement;
root.dataset.theme = root.dataset.theme || 'light';

document.getElementById('themeToggle').addEventListener('click', () => {
  root.dataset.theme = root.dataset.theme === 'light' ? 'dark' : 'light';
});

Лучшие практики и ограничения

Частые ошибки новичков

1. «Число не работает как число». Помните: dataset возвращает строки.
2. «Почему не читается свойство?»: неправильный нейминг (например, data-userId в HTML и попытка прочитать dataset.userId). Делайте data-user-id в HTML.
3. «Сломался JSON в атрибуте» — проверьте экранирование кавычек и валидность JSON.
4. «Стили не применяются» — проверьте селектор [data-state="..."] и что атрибут реально есть на элементе.

Где потренироваться и прокачать вёрстку

Хотите уверенно использовать HTML5-приёмы (включая data-*), собирать аккуратные интерфейсы и понимать, где хранить данные и как их связывать со стилями и JS? Рекомендую посмотреть программу интенсивного практического курса: Прокачать вёрстку на курсе «Вёрстка сайта с нуля 2.0» — от основ HTML/CSS до адаптивов, сборки и типичных паттернов на реальных макетах.

Итог

Data-атрибуты — мощный, но простой механизм HTML5. Они отлично подходят для передачи малых данных между разметкой, CSS и JS: состояния, идентификаторы, конфиги. Соблюдайте нейминг, явно приводите типы, не храните чувствительные данные и используйте их как «клей» между слоями интерфейса — тогда верстка останется чистой, а логика — понятной и предсказуемой.

Источник