Pentru ce este recomandat să folosiți atributele data în HTML?

Atributele data-* sunt utilizate pentru stocarea datelor arbitrare asociate cu un element HTML specific, fără a fi nevoie să se utilizeze atribute non-standard sau proprietăți DOM.

Principalele avantaje:

• Corect semantic: Ele fac parte din standardul HTML5 și nu încalcă validitatea documentului.
• Acces facil: Accesul la date se face prin proprietatea dataset în JavaScript, care returnează un obiect cu chei corespunzătoare părților atributului după data-.
• Convenabil pentru JavaScript/CSS: Permite atașarea anumitor date la elemente, care apoi pot fi utilizate în logica JavaScript sau pentru stilizare în CSS (cu ajutorul selectorilor de atribute).
• Separarea datelor de prezentare: Ajută la separarea structurii HTML de date, care pot fi utilizate pentru comportament sau prezentare.

Exemple de utilizare:

• Stocarea ID-ului unei înregistrări în bază de date.
• Salvarea parametrilor pentru o fereastră pop-up sau dialog modal.
• Determinarea stării unui element (de exemplu, data-state="active").
• Transmiterea unor volume mici de date de la backend la frontend pentru utilizare în JavaScript.

Exemplu de acces în JavaScript:

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