Proč se doporučuje používat atributy data v HTML?

Atributy data-* se používají k ukládání libovolných dat spojených s konkrétním prvkem HTML, aniž by bylo nutné používat nestandardní atributy nebo vlastnosti DOM.

Hlavní výhody:

• Sémanticky správné: Jsou součástí standardu HTML5 a neporušují platnost dokumentu.
• Snadný přístup: Přístup k datům se provádí přes vlastnost dataset v JavaScriptu, která vrací objekt s klíči odpovídajícími částem atributu po data-.
• Pohodlné pro JavaScript/CSS: Umožňují přiřadit určitá data prvkům, která lze následně použít v logice JavaScriptu nebo pro stylování v CSS (pomocí selektorů atributů).
• Oddělení dat od prezentace: Pomáhají oddělit strukturu HTML od dat, která mohou být použita pro chování nebo prezentaci.

Příklady použití:

• Uložení ID záznamu v databázi.
• Uložení parametrů pro vyskakovací okno nebo modální dialog.
• Určení stavu prvku (například data-state="active").
• Přenos malých objemů dat z backendu na frontend pro použití v JavaScriptu.

Příklad přístupu v JavaScriptu:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // Přístup k hodnotě "123"
const category = element.dataset.category; // Přístup k hodnotě "electronics"