Miért ajánlott a data attribútumok használata HTML-ben?

A HTML data-* attribútumokat ajánlott személyre szabott adatok tárolására, amelyek nem rendelkeznek vizuális megjelenítéssel, közvetlenül a DOM elemekben. Ez lehetővé teszi:

• Kisebb adatmennyiségek tárolását az elemhez kapcsolódóan: Például, termékazonosító, elem státusza, widget beállítások.
• Az adatok könnyű elérését és módosítását JavaScript segítségével: Az adatok könnyen elérhetők a element.dataset segítségével, és módosíthatók.

// Adatok lekérése
const myElement = document.getElementById('my-element');
const elementId = myElement.dataset.elementId; // Az data-element-id attribútum értékének lekérése

// Adatok beállítása
myElement.dataset.status = 'active'; // Az data-status attribútum értékének beállítása

• Nem-szemantikus osztályok elkerülése: Az osztályok adat tárolására való használata (pl. .status-active) kevésbé olvashatóvá és karbantarthatóbbá teheti a kódot.
• A teljesítmény javítása bizonyos szcenáriókban: Az adatokhoz való hozzáférés a dataset segítségével gyorsabb lehet, mint a string attribútumok elemzése vagy rejtett elemekkel való munka.
• Ezeknek az adatoknak a használata CSS szelektorokban:

/* Elem kiválasztása adott státusszal */
[data-status="active"] {
  border: 1px solid green;
}

Fontos, hogy az data-* attribútumokat olyan adatokhoz használjuk, amelyek nem rendelkeznek más, HTML-ben megfelelően értelmezett attribútummal. Az olyan adatok esetében, amelyek keresőmotorok vagy más parser-ek számára elérhetőek kell legyenek, megfelelő sémás elemeket és attribútumokat kell alkalmazni.