dataattributen

Data-attributen zijn aangepaste HTML-attributen die beginnen met data-. Ze maakten deel uit van HTML5 en bieden een manier om kleine hoeveelheden privégegevens direct aan een HTML-element te koppelen, zodat scripts de gegevens kunnen lezen en gebruiken zonder extra DOM-structuur of communicatie. Ze zijn bedoeld om client-side logica te ondersteunen en niet om grote bestanden of gevoelige informatie op te slaan.

De syntaxis is eenvoudig: een attribuutnaam begint met data- gevolgd door een naam die beschrijvend is. De waarde is altijd een string. Bijvoorbeeld: <div data-user-id="123" data-role="admin"></div>. Data-attributen kunnen meerdere waarden bevatten en kunnen overal in de markup voorkomen waar attributen zijn toegestaan.

Toegang tot data-attributen gebeurt meestal via JavaScript. Elk element heeft de eigenschap dataset, een object met eigenschappen die overeenkomen met de data- attributen. data-user-id wordt bijvoorbeeld toegankelijk als element.dataset.userId. Toepassing kan eenvoudig zijn: const el = document.querySelector('#x'); console.log(el.dataset.userId) geeft "123". Je kunt waarden ook wijzigen, waarbij de DOM-attribuut data-user-id automatisch wordt bijgewerkt to reflect de wijziging.

In CSS kun je data-attributen ook gebruiken voor selectie met attributenselectors, bijvoorbeeld [data-user-id="123"]. Data-attributen zijn handig voor het opslaan van kleine stukken data die specifiek zijn voor een element en die nodig zijn voor UI-componenten of widgets, zoals IDs, statusflags of configuratie. Ze moeten echter beperkt blijven tot niet-gevoelige informatie en korte strings, omdat ze altijd in de browser aanwezig en door gebruikers inspecteerbaar zijn. Voor complexe statistieken of gevoelige data zijn alternatieven zoals een apart data-model of server-side opslag aangewezen.