Для чего нужны data-атрибуты в HTML?

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

Они полезны для:

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

  html

  javascript

• Создания пользовательских атрибутов: Вместо изобретения собственных нестандартных атрибутов (что не соответствует спецификации HTML), используются data-*, что делает код более семантичным и валидным.

• Стилизации: С помощью CSS-селекторо