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

Atribúty data-* sa používajú na ukladanie ľubovoľných údajov spojených s konkrétnym prvkom HTML, bez potreby používať nestandardné atribúty alebo vlastnosti DOM.

Hlavné výhody:

• Semanticky správne: Sú súčasťou štandardu HTML5 a neporušujú platnosť dokumentu.
• Jednoduchý prístup: Prístup k údajom sa vykonáva cez vlastnosť dataset v JavaScripte, ktorá vracia objekt s kľúčmi zodpovedajúcimi častiam atribútu po data-.
• Pohodlné pre JavaScript/CSS: Umožňujú priradiť určité údaje prvkom, ktoré môžu byť následne použité v logike JavaScript alebo na štýlovanie v CSS (pomocou selektorov atribútov).
• Oddelenie údajov od prezentácie: Pomáhajú oddeliť štruktúru HTML od údajov, ktoré môžu byť použité na správanie alebo prezentáciu.

Príklady použitia:

• Uloženie ID záznamu v databáze.
• Uloženie parametrov pre vyskakovacie okno alebo modálne dialógové okno.
• Určenie stavu prvku (napríklad, data-state="active").
• Prenos malých objemov údajov z backendu na frontend na použitie v JavaScripte.

Príklad prístupu v JavaScripte:

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