Milleks soovitatakse kasutada data atribuute HTML-s?

HTML-i data-* atribuutid soovitatakse kasutada kohandatud andmete salvestamiseks, millel puudub visuaalne esitlus, otse DOM-elementide sees. See võimaldab:

• Salvestada väikeseid andmeosi, mis on seotud elemendiga: Näiteks toote identifikaator, elemendi staatus, vidina seaded.
• Lihtsustada andmetele juurdepääsu ja nende muutmist JavaScripti abil: Andmeid saab hõlpsasti kätte element.dataset kaudu ja neid muuta.

// Andmete saamine
const myElement = document.getElementById('my-element');
const elementId = myElement.dataset.elementId; // Saada data-element-id atribuudi väärtus

// Andmete määramine
myElement.dataset.status = 'active'; // Määrata data-status atribuudi väärtus

• Vältida mitte-semantilisi klasse: Klasside kasutamine andmete salvestamiseks (näiteks .status-active) võib muuta märgise vähem loetavaks ja keerulisemaks hooldada.
• Parandada jõudlust teatud stsenaariumides: Andmetele juurdepääs dataset kaudu võib olla kiirem kui string-atribuutide parseldamine või peidetud elementidega töötamine.
• Kasutada neid andmeid CSS selektorites:

/* Valida elemendid kindla staatusega */
[data-status="active"] {
  border: 1px solid green;
}

Oluline on kasutada data-* atribuute andmete jaoks, millel ei ole muud sobivat semantilist HTML-atribuutti. Andmeid, mis peavad olema otsitavate süsteemide või teiste parserite jaoks kättesaadavad, tuleks kasutada vastavaid semantilisi elemente ja atribuute.