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

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

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

javascript

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

css

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