¿Para qué se recomienda utilizar los atributos data en HTML?

Los atributos data-* se utilizan para almacenar datos arbitrarios relacionados con un elemento HTML específico, sin necesidad de usar atributos no estándar o propiedades DOM.

Ventajas principales:

• Semánticamente correctos: Forman parte del estándar HTML5 y no violan la validez del documento.
• Fácil acceso: El acceso a los datos se realiza a través de la propiedad dataset en JavaScript, que devuelve un objeto con claves que corresponden a las partes del atributo después de data-.
• Comodidad para JavaScript/CSS: Permiten vincular ciertos datos a los elementos, que luego pueden usarse en la lógica de JavaScript o para estilizar en CSS (mediante selectores de atributos).
• Separación de datos y presentación: Ayudan a separar la estructura HTML de los datos, que pueden usarse para comportamiento o presentación.

Ejemplos de uso:

• Almacenamiento del ID de una entrada en una base de datos.
• Guardar parámetros para una ventana emergente o diálogo modal.
• Definir el estado de un elemento (por ejemplo, data-state="active").
• Transmitir pequeños volúmenes de datos del backend al frontend para su uso en JavaScript.

Ejemplo de acceso en JavaScript:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // Acceso al valor "123"
const category = element.dataset.category; // Acceso al valor "electronics"