A cosa serve raccomandare l'uso degli attributi data in HTML?

Gli attributi data-* vengono utilizzati per memorizzare dati arbitrari associati a un elemento HTML specifico, senza la necessità di utilizzare attributi non standard o proprietà DOM.

Vantaggi principali:

• Semanticamente corretti: Sono parte dello standard HTML5 e non violano la validità del documento.
• Accesso facile: L'accesso ai dati avviene tramite la proprietà dataset in JavaScript, che restituisce un oggetto con chiavi corrispondenti alle parti dell'attributo dopo data-.
• Comodità per JavaScript/CSS: Permettono di associare determinati dati agli elementi, che possono poi essere utilizzati nella logica JavaScript o per la stilizzazione in CSS (con selettori di attributi).
• Separazione di dati e presentazione: Aiutano a separare la struttura HTML dai dati, che possono essere usati per comportamento o presentazione.

Esempi di utilizzo:

• Memorizzazione dell'ID di una registrazione nel database.
• Salvataggio di parametri per una finestra popup o dialogo modale.
• Definizione dello stato di un elemento (ad esempio, data-state="active").
• Trasmissione di piccoli volumi di dati dal backend al frontend per l'uso in JavaScript.

Esempio di accesso in JavaScript:

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