Практический смысл
data-* хранят пользовательские данные в разметке без невалидных атрибутов.
<button data-id="42" data-action="delete">Удалить</button>
Удобны для делегирования событий. Не для секретов. Для крупных данных лучше JS/state, не раздувать DOM.
Итог: data-* = кастомные данные на элементе, доступ через dataset.
