Az HTML-ben a data attribútumokat mire használják?

A data-* attribútumokat arra használják, hogy egyedi adatokat tároljanak, amelyek nem rendelkeznek vizuális megjelenítéssel, közvetlenül HTML elemekben.

Fő felhasználási célok:

• Hozzáférés adatokhoz JavaScript/CSS segítségével: Lehetővé teszik az elem adatinak könnyű lekérését és manipulálását JavaScript (element.dataset) segítségével vagy azok CSS-sel történő használatát ([data-attribute="value"]).
• Metaadatok tárolása: Kényelmes módja az elemhez kapcsolódó további információk (pl. termékazonosító, felhasználótípus, állapot) tárolásának.
• Egyedi komponensek létrehozása: Használhatók a JavaScript által megvalósított egyedi komponensek viselkedésének vagy tulajdonságainak meghatározására.
• Szemantika javítása: Egy bizonyos szintű szemantika hozzáadására, a tartalomhoz kapcsolódó specifikus adatok leírására.

HTML-ben példák:

<div data-product-id="123" data-category="electronics">
  Okostelefon
</div>

JavaScript hozzáférés:

// Elem lekérése
const productElement = document.querySelector('div');

// Data attribútumok elérése
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

CSS-ben használat:

/* Stílus azokra az elemekre, amelyek data-category="electronics" értékkel rendelkeznek */
[data-category="electronics"] {
  border: 1px solid blue;
}