Data Attributes
Een HTML-attribuut geeft een element extra informatie. Naast standaardattributen zoals id, class en src, kun je ook je eigen aangepaste data-attributen maken om extra informatie op te slaan die je pagina of script later kan lezen.
Een data-attribuut begint met de prefix data- gevolgd door een naam. Bijvoorbeeld:
<ul>
<li data-email="[email protected]">Joe</li>
<li data-email="[email protected]">Mary</li>
</ul>
Hier slaat het data-email-attribuut een e-mailadres op op elk lijstitem. De browser behandelt het als elk ander attribuut — je kunt het lezen met CSS, JavaScript of gewoon bekijken in de HTML.
Met de DOM kun je een data-attribuut lezen met JavaScript via getAttribute("data-email"), of met de moderne dataset-API:
// lees het data-email-attribuut van het eerste li
var email = document.querySelector("li").dataset.email;
alert(email);
De eigenschap dataset zet data-email om naar de sleutel email. Streepjes worden verwijderd en de volgende letter wordt met een hoofdletter geschreven, dus data-user-name wordt userName.
Data-attributen zijn perfect voor het opslaan van kleine hoeveelheden extra data — zoals configuratiewaarden, id's of instellingen — waarvoor geen apart element of script nodig is.
Exercise
- Voeg een
data-year-attribuut toe met de waarde2026aan het<span>-element. - Voeg een
data-rank-attribuut toe met de waardefirstaan het<p>-element.
Sponsors
