Per cosa si consiglia di utilizzare gli attributi data in HTML?

Gli attributi data-* in HTML sono raccomandati per memorizzare dati personalizzati che non hanno una rappresentazione visiva, direttamente all’interno degli elementi DOM. Questo permette:

• Di memorizzare piccole porzioni di dati associate all’elemento: Ad esempio, l’identificativo del prodotto, lo stato dell’elemento, le impostazioni del widget.
• Di semplificare l’accesso e la manipolazione dei dati tramite JavaScript: I dati possono essere facilmente recuperati tramite element.dataset e modificati.

// Ottenere dati
const mioElemento = document.getElementById('mio-elemento');
const idElemento = mioElemento.dataset.elementId; // Ottieni il valore dell’attributo data-element-id

// Impostare dati
mioElemento.dataset.status = 'active'; // Imposta il valore dell’attributo data-status

• Evitare classi non semantiche: L’uso di classi per memorizzare dati (ad esempio, .status-active) può rendere il markup meno leggibile e più difficile da mantenere.
• Migliorare le prestazioni in alcuni scenari: L’accesso ai dati tramite dataset può essere più veloce rispetto al parsing di attributi stringa o al lavoro con elementi nascosti.
• Utilizzare questi dati nei selettori CSS:

/* Selezionare gli elementi con uno stato specifico */
[data-status="active"] {
  border: 1px solid green;
}

È importante usare gli attributi data-* per dati che non hanno un altro attributo semantico HTML appropriato. Per dati che devono essere accessibili ai motori di ricerca o ad altri parser, si dovrebbero usare elementi e attributi semantici appropriati.