data-атрибуты в HTML: зачем нужны и как использовать

data-атрибуты — это способ хранить кастомные данные в HTML-элементах. Они начинаются с префикса data- и позволяют безопасно передавать информацию из HTML в JavaScript без создания нестандартных атрибутов.

Синтаксис

<div data-user-id="1234" data-role="admin">Привет, это команда Hack Frontend!</div>

Где применяются?

• Для передачи данных в JavaScript
• Для инициализации компонентов
• Для хранения конфигураций
• При работе с событиями (например, у кнопки можно указать data-id)
• Для делегирования событий (например, на списках)

Как получить data-атрибут в JavaScript?

<button data-product-id="42">Купить</button>

const button = document.querySelector("button");
const productId = button.dataset.productId;

console.log(productId); // "42"

Все data- атрибуты становятся доступными через element.dataset, а имя атрибута превращается в camelCase.

Пример использования

<ul>
  <li data-id="1">Элемент 1</li>
  <li data-id="2">Элемент 2</li>
  <li data-id="3">Элемент 3</li>
</ul>

document.querySelector("ul").addEventListener("click", (e) => {
  const target = e.target;
  const id = target.dataset.id;
  if (id) {
    console.log("Клик по элементу с id:", id);
  }
});

Здесь data-id используется для определения, на какой элемент списка кликнули.

Итог

• data- атрибуты — мощный способ передавать данные между HTML и JavaScript.
• Их легко читать, использовать и не нужно создавать лишние глобальные переменные.
• Отлично подходят для интерактивных компонентов, навигации, отслеживания кликов и многого другого.