Pentru ce sunt folosiți atributele data în HTML?

Atributele data-* sunt utilizate pentru stocarea datelor personalizate, care nu au o reprezentare vizuală, direct în elementele HTML.

Scopurile principale ale utilizării:

• Accesul la date prin JavaScript/CSS: Permite obținerea și manipularea ușoară a datelor elementului prin JavaScript (element.dataset) sau utilizarea lor în selectori CSS ([data-attribute="value"]).
• Stocarea de meta-informații: Convenabil pentru stocarea informațiilor suplimentare legate de element (de exemplu, ID-ul produsului, tipul utilizatorului, starea).
• Crearea de componente personalizate: Pot fi folosite pentru a defini comportamentul sau proprietățile componentelor personalizate, implementate cu JavaScript.
• Îmbunătățirea semanticii: Pot adăuga un anumit nivel de semantică, descriind date specifice legate de conținut.

Exemplu de utilizare în HTML:

<div data-product-id="123" data-category="electronics">
  Smartphone
</div>

Accesul prin JavaScript:

// Obținerea elementului
const productElement = document.querySelector('div');

// Accesul la atributele data
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

Utilizarea în CSS:

/* Stil pentru elementele cu data-category="electronics" */
[data-category="electronics"] {
  border: 1px solid blue;
}