Zašto se koriste atributi data u HTML-u?

Atributi data-* koriste se za skladištenje prilagođenih podataka koji nemaju vizuelni prikaz, direktno u HTML elementima.

Glavni ciljevi korišćenja:

• Pristup podacima putem JavaScript/CSS: Omogućavaju lako dobijanje i manipulaciju podacima elementa putem JavaScript (element.dataset) ili njihovo korišćenje u CSS selektorima ([data-attribute="value"]).
• Skladištenje meta informacija: Pogodno za čuvanje dodatnih informacija povezanim sa elementom (npr. ID proizvoda, tip korisnika, stanje).
• Kreiranje prilagođenih komponenti: Mogu se koristiti za definisanje ponašanja ili svojstava prilagođenih komponenti, implementiranih pomoću JavaScript-a.
• Unapređenje semantike: Mogu dodati određeni nivo semantike, opisujući specifične podatke povezane sa sadržajem.

Primer upotrebe u HTML:

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

Pristup putem JavaScript-a:

// Dobijanje elementa
const productElement = document.querySelector('div');

// Pristup data atributima
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

Upotreba u CSS:

/* Stil za elemente sa data-category="electronics" */
[data-category="electronics"] {
  border: 1px solid blue;
}