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

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

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

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