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

Atributele data-* în HTML sunt recomandate pentru stocarea datelor personalizate care nu au o reprezentare vizuală, direct în interiorul elementelor DOM. Acest lucru permite:

• Stocarea unor porțiuni mici de date legate de element: De exemplu, identificatorul produsului, starea elementului, setările widget-ului.
• Facilitarea accesului și manipulării datelor prin JavaScript: Datele pot fi ușor obținute prin element.dataset și modificate.

// Obținerea datelor
const myElement = document.getElementById('my-element');
const elementId = myElement.dataset.elementId; // Obține valoarea atributului data-element-id

// Setarea datelor
myElement.dataset.status = 'active'; // Setează valoarea atributului data-status

• Evitarea claselor ne-semantice: Utilizarea claselor pentru stocarea datelor (de exemplu, .status-active) poate face ca marcajul să fie mai puțin lizibil și mai dificil de întreținut.
• Îmbunătățirea performanței în anumite scenarii: Accesul la date prin dataset poate fi mai rapid decât parsarea atributelor de tip string sau lucrul cu elemente ascunse.
• Utilizarea acestor date în selectorii CSS:

/* Selectarea elementelor cu un anumit statut */
[data-status="active"] {
  border: 1px solid green;
}

Este important să folosiți atributele data-* pentru date care nu au un alt atribut semantic HTML adecvat. Pentru datele care trebuie să fie accesibile motoarelor de căutare sau altor parsere, trebuie utilizate elemente și atribute semantic corespunzătoare.