Зашто се препоручује коришћење data атрибута у HTML-у?

Atributi data-* koriste se za skladištenje proizvoljnih podataka povezani sa određenim HTML elementom, bez potrebe za korišćenjem nestandardnih atributa ili DOM svojstava.

Glavne prednosti:

• Semantički ispravni: Oni su deo HTML5 standarda i ne narušavaju validnost dokumenta.
• Lako dostupni: Pristup podacima vrši se putem svojstva dataset u JavaScript-u, koje vraća objekat sa ključevima koji odgovaraju delovima atributa nakon data-.
• Prijatno za JavaScript/CSS: Omogućavaju povezivanje određenih podataka sa elementima, koji se zatim mogu koristiti u JavaScript logici ili za stilizaciju u CSS-u (pomoću selektora atributa).
• Odvajanje podataka od prezentacije: Pomažu u razdvajanju strukture HTML od podataka, koji mogu biti korišćeni za ponašanje ili prikaz.

Primeri upotrebe:

• Čuvanje ID zapisa u bazi podataka.
• Čuvanje parametara za iskačući prozor ili modalni dijalog.
• Određivanje stanja elementa (npr., data-state="active").
• Prenos malih količina podataka sa backend-a na frontend za korišćenje u JavaScript-u.

Primer pristupa u JavaScript-u:

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