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

A data-* attribútumokat arra használják, hogy tetszőleges adatokat tároljanak egy adott HTML elemhez, anélkül, hogy nem szabványos attribútumokat vagy DOM tulajdonságokat kellene használni.

Fő előnyei:

• Szemantikus szempontból helyes: Ezek az HTML5 szabvány részét képezik, és nem sértik a dokumentum érvényességét.
• Könnyű hozzáférés: Az adatokhoz a JavaScriptben a dataset tulajdonságon keresztül lehet hozzáférni, amely egy objektumot ad vissza, a kulcsok megfelelnek a data- utáni részeknek.
• Kényelmes JavaScript/CSS számára: Lehetővé teszik, hogy bizonyos adatokat kötjenek az elemekhez, amelyeket később JavaScript logikában vagy CSS-ben lehet használni (attribútumszelektorok segítségével).
• Az adatok és a prezentáció szétválasztása: Segítenek elválasztani a HTML szerkezetét az adatoktól, amelyeket viselkedéshez vagy megjelenítéshez lehet használni.

Használati példák:

• Egy rekord azonosítójának tárolása az adatbázisban.
• Paraméterek mentése felugró ablakhoz vagy modális dialógushoz.
• Az elem állapotának meghatározása (pl. data-state="active").
• Kis adatmennyiség átadása a backendről a frontendre JavaScriptben való használatra.

JavaScriptben való hozzáférés példája:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // "123" értékhez való hozzáférés
const category = element.dataset.category; // "electronics" értékhez való hozzáférés