Waar worden de data-attributen in HTML voor gebruikt?

De data-*-attributen worden gebruikt om aangepaste gegevens op te slaan die geen visuele weergave hebben, direct in HTML-elementen.

Belangrijkste gebruiksdoelen:

• Toegang tot gegevens via JavaScript/CSS: Ze maken het gemakkelijk om de gegevens van het element op te halen en te manipuleren via JavaScript (element.dataset) of ze te gebruiken in CSS-selectors ([data-attribute="value"]).
• Opslag van meta-informatie: Handig voor het opslaan van aanvullende informatie gerelateerd aan het element (bijvoorbeeld product-ID, gebruikers type, status).
• Creëren van aangepaste componenten: Ze kunnen worden gebruikt om het gedrag of de eigenschappen van aangepaste componenten te definiëren, geïmplementeerd met JavaScript.
• Verbetering van de semantiek: Ze kunnen een bepaald niveau van semantiek toevoegen door specifieke gegevens te beschrijven die gerelateerd zijn aan de inhoud.

Voorbeeld van gebruik in HTML:

<div data-product-id="123" data-category="electronics">
  Smartphone
</div>

Toegang via JavaScript:

// Element ophalen
const productElement = document.querySelector('div');

// Toegang tot data-attributen
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

Gebruik in CSS:

/* Stijl voor elementen met data-category="electronics" */
[data-category="electronics"] {
  border: 1px solid blue;
}