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

Atributy data-* v HTML se doporučují pro ukládání vlastních dat, která nemají vizuální reprezentaci, přímo uvnitř prvků DOM. To umožňuje:

• Ukládat malé části dat spojených s prvkem: Například identifikátor produktu, stav prvku, nastavení widgetu.
• Usnadnit přístup a manipulaci s daty pomocí JavaScriptu: Data lze snadno získat přes element.dataset a upravit je.

// Získání dat
const myElement = document.getElementById('my-element');
const elementId = myElement.dataset.elementId; // Získat hodnotu atributu data-element-id

// Nastavení dat
myElement.dataset.status = 'active'; // Nastavit hodnotu atributu data-status

• Vyhnout se nesemantickým třídám: Použití tříd pro ukládání dat (například .status-active) může učinit strukturu méně čitelnou a složitější na údržbu.
• Zlepšit výkon v určitých scénářích: Přístup k datům přes dataset může být rychlejší než parsování řetězcových atributů nebo práce s skrytými prvky.
• Použití těchto dat v CSS selektorech:

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

Je důležité používat atributy data-* pro data, která nemají jiný vhodný sémantický HTML atribut. Pro data, která mají být dostupná vyhledávačům nebo jiným parserům, by měly být použity odpovídající sémantické prvky a atributy.