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

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

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

• Семантически корректны: Они являются частью стандарта HTML5 и не нарушают валидность документа.
• Легкий доступ: Доступ к данным осуществляется через свойство dataset в JavaScript, возвращающее объект с ключами, соответствующими частям атрибута после data-.
• Удобство для JavaScript/CSS: Позволяют привязать определенные данные к элементам, которые затем можно использовать в логике JavaScript или для стилизации в CSS (с помощью селекторов атрибутов).
• Отделение данных от презентации: Помогают разделить структуру HTML от данных, которые могут быть использованы для поведения или представления.

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

• Хранение ID записи в базе данных.
• Сохранение параметров для всплывающего окна или модального диалога.
• Определение состояния элемента (например, data-state="active").
• Передача небольших объемов данных из бэкенда на фронтенд для использования в JavaScript.

Пример доступа в JavaScript:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // Доступ к значению "123"
const category = element.dataset.category; // Доступ к значению "electronics"