Na čo sa v HTML používajú atribúty data?

Atribúty data-* sa používajú na ukladanie vlastných údajov, ktoré nemajú vizuálnu reprezentáciu, priamo v HTML prvkoch.

Hlavné ciele použitia:

• Prístup k údajom cez JavaScript/CSS: Umožňujú ľahko získať a manipulovať s údajmi prvku pomocou JavaScript (element.dataset) alebo ich použiť v CSS selektoroch ([data-attribute="value"]).
• Ukladanie meta informácií: Vhodné na uloženie doplnkových informácií súvisiacich s prvkom (napríklad ID produktu, typ používateľa, stav).
• Vytváranie vlastných komponentov: Môžu byť použité na definovanie správania alebo vlastností vlastných komponentov, implementovaných pomocou JavaScriptu.
• Zlepšenie sémantiky: Môžu pridať určitú úroveň sémantiky, opisujúc špecifické údaje spojené s obsahom.

Príklad použitia v HTML:

<div data-product-id="123" data-category="electronics">
  Smartfón
</div>

Prístup cez JavaScript:

// Získanie prvku
const productElement = document.querySelector('div');

// Prístup k data atribútom
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

Použitie v CSS:

/* Štýl pre prvky s data-category="electronics" */
[data-category="electronics"] {
  border: 1px solid blue;
}