Kodėl rekomenduojama naudoti data atributus HTML?

HTML data-* atributai rekomenduojami naudoti pritaikytų duomenų saugojimui, kurie neturi vizualinio vaizdavimo, tiesiogiai DOM elementų viduje. Tai leidžia:

• Saugo mažas duomenų dalis, susijusias su elementu: Pavyzdžiui, produkto identifikatorius, elemento būsena, valdiklio nustatymai.
• Paprastai pasiekti ir keisti duomenis naudojant JavaScript: Duomenis lengvai galima gauti per element.dataset ir keisti.

// Duomenų gavimas
const myElement = document.getElementById('my-element');
const elementId = myElement.dataset.elementId; // Gauti data-element-id atributo reikšmę

// Duomenų nustatymas
myElement.dataset.status = 'active'; // Nustatyti data-status atributo reikšmę

• Vengti nesemantinčių klasių: Naudojant klases duomenims saugoti (pvz., .status-active) gali padaryti žymėjimą mažiau skaitomą ir sudėtingesnį palaikyti.
• Pagerinti našumą tam tikruose scenarijuose: Prieiga prie duomenų per dataset gali būti greitesnė nei eilutės atributų analizė ar darbai su paslėptais elementais.
• Naudoti šiuos duomenis CSS selektoriuose:

/* Pasirinkti elementus su tam tikru statusu */
[data-status="active"] {
  border: 1px solid green;
}

Svarbu naudoti data-* atributus duomenims, kurie neturi kito tinkamo HTML semantinį atributą. Duomenys, kurie turi būti prieinami paieškos sistemoms ar kitiems analizatoriams, turėtų būti naudojami atitinkami semantiniai elementai ir atributai.