Waarvoor dienen data-attributes in HTML?

Data-attributen (data-*) maken het mogelijk om aanvullende, niet-standaardgegevens over HTML-elementen aan de clientzijde op te slaan zonder expliciet gebruik van andere attributen of manipulatie van de DOM-structuur voor deze doeleinden.

Ze zijn handig voor:

• Gegevensopslag voor JavaScript: JavaScript kan gemakkelijk toegang krijgen tot deze gegevens en ze gebruiken voor dynamisch gedrag, interactie met het element of het uitwisselen van informatie tussen delen van de applicatie.

  <div id="user-profile" data-user-id="123" data-user-role="admin">
      Hallo, admin!
  </div>
  

  // Gegevens ophalen uit data-attributen
  const userProfile = document.getElementById('user-profile');
  const userId = userProfile.dataset.userId; // "123"
  const userRole = userProfile.dataset.userRole; // "admin"
  

• Aanmaken van aangepaste attributen: In plaats van eigen niet-standaard attributen te verzinnen (wat niet overeenkomt met de HTML-specificatie), worden data-* gebruikt, wat de code semantischer en geldig maakt.

• Stijltoepassing: Met CSS-selectors gebaseerd op attributen kunnen elementen worden gestileerd op basis van de waarden van hun data- attributen.

  <button data-status="active">Actieve knop</button>
  <button data-status="inactive">Inactieve knop</button>
  

  /* Styling op basis van data-attribuut */
  button[data-status="active"] {
      background-color: green;
  }
  
  button[data-status="inactive"] {
      background-color: gray;
  }
  

• Frameworks en bibliotheken: Veel frontend-frameworks en -bibliotheken gebruiken data--attributen om componenten te initialiseren, parameters door te geven of gegevens te koppelen (bijvoorbeeld Vue.js met v-bind of React met data--attributen voor integratie van derden).

• Microformats en gestructureerde gegevens: In sommige gevallen kunnen data--attributen worden gebruikt om microformats of machine-leesbare gegevens in te voegen.

Over het algemeen bieden data--attributen een flexibele en gestandaardiseerde manier om extra informatie direct in HTML-elementen op te slaan, wat de interactie ermee via JavaScript en CSS vergemakkelijkt.