¿Para qué sirven los atributos data en HTML?

Para almacenar datos arbitrarios que no tienen un valor semántico explícito, directamente en los elementos HTML. Esto permite:

• Acceder a estos datos a través de JavaScript para comportamientos o manipulaciones dinámicas.
• Utilizarlos en selectores CSS para estilizar elementos en función de los valores de los atributos data.
• Incrustar configuraciones o metadatos relacionados con un elemento específico, sin necesidad de almacenamientos separados o soluciones alternativas.

Por ejemplo, se puede guardar el ID de un objeto relacionado, el estado del elemento u otros datos específicos de la aplicación.