Waarvoor wordt het aanbevolen om de data-attributen in HTML te gebruiken?

De data-*-attributen worden gebruikt om willekeurige gegevens op te slaan die verband houden met een specifiek HTML-element, zonder dat er gebruik hoeft te worden gemaakt van niet-standaard attributen of DOM-eigenschappen.

Belangrijkste voordelen:

• Semantisch correct: Ze maken deel uit van de HTML5-standaard en schenden de geldigheid van het document niet.
• Gemakkelijk toegankelijk: Toegang tot de gegevens gebeurt via de eigenschap dataset in JavaScript, die een object retourneert met sleutels die overeenkomen met de delen van het attribuut na data-.
• Handig voor JavaScript/CSS: Ze stellen je in staat om bepaalde gegevens aan elementen te koppelen, die vervolgens kunnen worden gebruikt in JavaScript-logica of voor styling in CSS (met behulp van attribuursselectors).
• Scheiding van gegevens en presentatie: Ze helpen om de HTML-structuur te scheiden van de gegevens die kunnen worden gebruikt voor gedrag of presentatie.

Voorbeelden van gebruik:

• Opslaan van de ID van een record in de database.
• Opslaan van parameters voor een pop-up of modale dialoog.
• Het bepalen van de status van een element (bijvoorbeeld, data-state="active").
• Het overdragen van kleine hoeveelheden gegevens van de backend naar de frontend voor gebruik in JavaScript.

Voorbeeld van toegang in JavaScript:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // Toegang tot "123"
const category = element.dataset.category; // Toegang tot "electronics"