Para que servem os atributos data no HTML?

Para armazenar dados arbitrários que não têm um valor semântico explícito, diretamente nos elementos HTML. Isto permite:

• Aceder a esses dados através do JavaScript para comportamentos ou manipulações dinâmicas.
• Usá-los em seletores CSS para estilizar elementos com base nos valores dos atributos data.
• Incorporar configurações ou metadados relacionados com um elemento específico, sem necessidade de armazenamentos separados ou soluções alternativas.

Por exemplo, pode-se guardar o ID de um objeto relacionado, o estado do elemento ou outros dados específicos da aplicação.