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

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

• Хранить небольшие порции данных, связанных с элементом: Например, идентификатор товара, статус элемента, настройки виджета.
• Упростить доступ и манипуляцию данными с помощью JavaScript: Данные легко получать через element.dataset и изменять их.

// Получение данных
const myElement = document.getElementById('my-element');
const elementId = myElement.dataset.elementId; // Получаем значение атрибута data-element-id

// Установка данных
myElement.dataset.status = 'active'; // Устанавливаем значение атрибута data-status

• Избежать несемантичных классов: Использование классов для хранения данных (например, .status-active) может сделать разметку менее читаемой и более сложной для поддержки.
• Улучшить производительность в некоторых сценариях: Обращение к данным через dataset может быть быстрее, чем парсинг строковых атрибутов или работа с скрытыми элементами.
• Использовать эти данные в CSS селекторах:

/* Выбор элементов с определенным статусом */
[data-status="active"] {
  border: 1px solid green;
}

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