Для чего используются атрибуты data в HTML?

Атрибуты data-* используются для хранения пользовательских данных, не имеющих визуального представления, прямо в элементах HTML.

Основные цели использования:

• Доступ к данным через JavaScript/CSS: Позволяют легко получать и манипулировать данными элемента через JavaScript (element.dataset) или использовать их в селекторах CSS ([data-attribute="value"]).
• Хранение метаинформации: Удобно для хранения дополнительной информации, связанной с элементом (например, ID товара, тип пользователя, состояние).
• Создание пользовательских компонентов: Могут использоваться для определения поведения или свойств кастомных компонентов, реализованных с помощью JavaScript.
• Улучшение семантики: Могут добавлять некоторый уровень семантики, описывая специфические данные, связанные с контентом.

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

<div data-product-id="123" data-category="electronics">
  Смартфон
</div>

Доступ через JavaScript:

// Получение элемента
const productElement = document.querySelector('div');

// Доступ к атрибутам data
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

Использование в CSS:

/* Стиль для элементов с data-category="electronics" */
[data-category="electronics"] {
  border: 1px solid blue;
}