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

De data-*-attributen in HTML worden aanbevolen voor het opslaan van aangepaste gegevens die geen visuele representatie hebben, direct binnen DOM-elementen. Dit maakt het mogelijk:

• Kleine hoeveelheden gegevens die met het element verbonden zijn op te slaan: Bijvoorbeeld, product-ID, status van het element, widget-instellingen.
• Gemakkelijk toegang tot en manipulatie van gegevens via JavaScript: Gegevens kunnen eenvoudig worden verkregen via element.dataset en gewijzigd.

// Gegevens ophalen
const mijnElement = document.getElementById('mijn-element');
const elementId = mijnElement.dataset.elementId; // Waarde van data-element-id ophalen

// Gegevens instellen
mijnElement.dataset.status = 'active'; // Waarde van data-status instellen

• Vermijd niet-semantische klassen: Het gebruik van klassen voor het opslaan van gegevens (bijvoorbeeld .status-active) kan de markup minder leesbaar en moeilijker te onderhouden maken.
• Verbeter de prestaties in sommige scenario’s: Toegang tot gegevens via dataset kan sneller zijn dan het parseren van stringattributen of werken met verborgen elementen.
• Gebruik deze gegevens in CSS-selectors:

/* Selecteer elementen met een bepaalde status */
[data-status="active"] {
  border: 1px solid green;
}

Het is belangrijk om data-*-attributen te gebruiken voor gegevens die geen ander geschikt semantisch HTML-attribuut hebben. Voor gegevens die toegankelijk moeten zijn voor zoekmachines of andere parsers, moeten respectievelijk semantische elementen en attributen worden gebruikt.