Разница между атрибутами data- и class в HTML5 заключается в их функциях.

Атрибут class позволяет назначать элементу один или несколько классов, которые могут быть использованы для стилизации с помощью CSS. 1 Классы группируют элементы, чтобы применять к ним одинаковые стили или манипулировать ими с помощью JavaScript. 1

Атрибут data-*, в свою очередь, используется для хранения пользовательских данных, которые могут быть использованы в JavaScript. 1 Эти атрибуты предоставляют гибкий способ хранения данных в HTML, не нарушая его структуру. 1 Они могут быть полезны для передачи данных между HTML и JavaScript. 1

Таким образом, атрибут class предназначен для стилизации элементов, а атрибут data-* — для хранения дополнительной информации, связанной с элементами HTML. 23