Prečo sa odporúča používať atribúty data v HTML?

Atribúty data-* v HTML sa odporúčajú na ukladanie vlastných údajov, ktoré nemajú vizuálnu reprezentáciu, priamo v prvkoch DOM. To umožňuje:

• Ukladanie malých častí údajov spojených s prvkom: Napríklad identifikátor produktu, stav prvku, nastavenia widgetu.
• Uľahčenie prístupu a manipulácie s údajmi pomocou JavaScriptu: Dáta je možné ľahko získať cez element.dataset a upraviť ich.

// Získanie údajov
const myElement = document.getElementById('my-element');
const elementId = myElement.dataset.elementId; // Získať hodnotu atribútu data-element-id

// Nastavenie údajov
myElement.dataset.status = 'active'; // Nastaviť hodnotu atribútu data-status

• Vyhnúť sa nesémantickým triedam: Použitie tried na ukladanie údajov (napríklad .status-active) môže spraviť štruktúru menej čitateľnou a ťažšie udržiavateľnou.
• Zlepšiť výkon v niektorých scenároch: Prístup k údajom cez dataset môže byť rýchlejší ako parsovanie reťazcových atribútov alebo práca s skrytými prvkami.
• Použiť tieto údaje v CSS selektoroch:

/* Vybrať prvky s určitým stavom */
[data-status="active"] {
  border: 1px solid green;
}

Je dôležité používať atribúty data-* pre údaje, ktoré nemajú iný vhodný sémantický HTML atribút. Pre údaje, ktoré majú byť dostupné pre vyhľadávače alebo iné parsery, by mali byť použité príslušné sémantické prvky a atribúty.