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

Los atributos data-* en HTML se recomiendan para almacenar datos personalizados que no tienen una representación visual, directamente dentro de los elementos DOM. Esto permite:

• Almacenar pequeñas porciones de datos relacionados con el elemento: Por ejemplo, el identificador del producto, el estado del elemento, la configuración del widget.
• Facilitar el acceso y la manipulación de datos mediante JavaScript: Los datos se pueden obtener fácilmente a través de element.dataset y modificarlos.

// Obtener datos
const miElemento = document.getElementById('mi-elemento');
const idElemento = miElemento.dataset.elementId; // Obtener el valor del atributo data-element-id

// Establecer datos
miElemento.dataset.status = 'active'; // Establecer el valor del atributo data-status

• Evitar clases no semánticas: El uso de clases para almacenar datos (por ejemplo, .status-active) puede hacer que el marcado sea menos legible y más difícil de mantener.
• Mejorar el rendimiento en algunos escenarios: Acceder a los datos a través de dataset puede ser más rápido que analizar atributos de cadena o trabajar con elementos ocultos.
• Usar estos datos en selectores CSS:

/* Seleccionar elementos con un estado específico */
[data-status="active"] {
  border: 1px solid green;
}

Es importante usar atributos data-* para datos que no tengan otro atributo semántico HTML adecuado. Para datos que deben ser accesibles para motores de búsqueda u otros analizadores, se deben usar elementos y atributos semánticos correspondientes.