HTML Kan Dit Ook
HTML heeft steeds meer taken overgenomen die voorheen tot het domein van JavaScript behoorden. Deze pagina somt een reeks dynamische functionaliteiten op die we nu uitsluitend met HTML kunnen realiseren.
Update 20-08-2026: Ik heb deze pagina oorspronkelijk in één uur gebouwd tijdens HTML Day 2026 om HTML te vieren en te schrijven. Sindsdien heb ik enkele bewerkingen aangebracht om beter aan te geven waar de browserimplementatie van sommige zaken ernstig tekortschiet en/of volledig niet voldoet aan de toegankelijkheidsbehoeften. Probeer het dus zeker uit, maar maak het zo toegankelijk mogelijk!
Popover
Lichte weigering (light dismiss), Esc om te sluiten, en geen beheer van z-index om het element bovenaan de laag te krijgen. Dit wordt volledig beheerd met de HTML-attributen popover, popovertarget en popovertargetaction. (MDN)
Voorbeeld:
<button popovertarget="example-popover">Toggle popover</button>
<div id="example-popover" popover>
<p>Geen JavaScript, alleen moderne browsermagie, dankzij de fantastische mensen die de specificaties voor het web schrijven en onze browsers bouwen!</p>
<button popovertarget="example-popover" popovertargetaction="hide">Sluiten</button>
</div><dialog>
Dit werkt vergelijkbaar met de popover, maar dan met een specifiek element voor modale dialoogvensters. (MDN)
Zie ook command / commandFor hieronder voor een recentere functie waarmee we dialoogelementen kunnen openen en sluiten (wat in de toekomst nuttig zal zijn voor veel andere non-JS functionaliteiten).
Voorbeeld met popover-attribuut:
<button popovertarget="example-dialog">Toggle <dialog> popover</button>
<dialog id="example-dialog" popover>
<p>Gesloten via HTML met <code style="background: #eee;"><form method="dialog"></code>, geopend met het <code style="background: #eee;">popover</code> attribuut.</p>
<button popovertarget="example-dialog" popovertargetaction="hide">Sluiten</button>
</dialog>Hoewel het een beetje tegen de geest van deze pagina ingaat, voeg ik dit korte fragment toe over hoe je via JavaScript met dialoogelementen omgaat:
Voorbeeld met JavaScript:
<button id="example-dialog-js-open">Open dialoog</button>
<dialog id="example-dialog-js">
<p>Deze wordt geopend met <code style="background: #eee;">.showModal()</code> en gesloten met <code style="background: #eee;">.close()</code>, beide aangeroepen vanuit JavaScript.</p>
<button id="example-dialog-js-close">Sluiten</button>
</dialog>
<script>
document.getElementById("example-dialog-js-open").addEventListener("click", () => {
document.getElementById("example-dialog-js").showModal()
})
document.getElementById("example-dialog-js-close").addEventListener("click", () => {
document.getElementById("example-dialog-js").close()
})
</script>Gegroepeerde <details>
Een gedeeld name-attribuut maakt van een groep <details>-elementen een exclusieve accordeon. Open er één en de andere sluiten automatisch. (MDN)
Voorbeeld:
<details name="example-group">
<summary>Eerste</summary>
<p>Open de tweede en kijk hoe deze automatisch sluit.</p>
</details>
<details name="example-group">
<summary>Tweede</summary>
<p>De eerste is nu verborgen.</p>
</details>command & commandfor
Losse HTML-knoppen die één popover aansturen, zonder scripting. (MDN)
Opmerking: Tot nu toe zijn alleen show-modal, close, request-close, toggle-popover, show-popover en hide-popover stabiel geïmplementeerd in browsers. We kunnen uitkijken naar toekomstige ondersteuning van 'invokers' om waarden te verhogen/verlagen, te interageren met media-elementen, tekst te kopiëren, etc.
Voorbeeld:
<button command="show-popover" commandfor="example-command-popover">Openen</button>
<button command="hide-popover" commandfor="example-command-popover">Sluiten</button>
<dialog id="example-command-popover" popover>
<p><code style="background: #eee;">show-popover</code> opent dit en <code style="background: #eee;">hide-popover</code> sluit het!</p>
<button command="hide-popover" commandfor="example-command-popover">Sluiten</button>
</dialog>loading="lazy"
Deze afbeelding stelt het laden uit tot deze zich in de buurt van het viewport bevindt. Er is geen IntersectionObserver aan te pas gekomen. (MDN)
Voorbeeld:
<img src="/images/avatar@2x.jpeg" loading="lazy" width="200" height="200" alt="een portretfoto van het gezicht van Chris Burnell">hidden until-found
Navigeren naar de fragmentlink hieronder onthult de verborgen sectie. De browser verwijdert automatisch hidden="until-found". (MDN)
Opmerking: Deze functie is nog vrij nieuw en werkt momenteel goed met de standaard zoekfunctie van de browser, maar minder goed met bijvoorbeeld zoekimplementaties van schermlezers. Toch is het iets om in je achterhoofd te houden voor de toekomst!
Voorbeeld:
<a href="#example-until-found">Spring naar verborgen inhoud</a>
<div id="example-until-found" hidden="until-found">
<p>Yahaha! Je hebt me gevonden!</p>
</div>Invoervelden voor Kleur, Datum & Tijd en Bereik
Kleur-, bereik- en datumkiezers, direct ingebouwd in de browser. (MDN: Color Input, MDN: Range Input, MDN: Color Input)
Waarschuwing! Sommige van deze elementen voelen nog onafgewerkt aan. Ik hoop dat formulierelementen de komende jaren meer aandacht krijgen, maar op dit moment schieten de implementaties in browsers nog tekort. Wees voorzichtig bij het gebruik hiervan. Je kunt verwachten dat de standaard browserstijlen van deze elementen sterk variëren tussen browsers en dat de toegankelijkheidservaring erg slecht kan zijn. Pas op voor de vele valkuilen!
Voorbeeld:
<label>Kleur <input type="color" value="#5f8aa6" autocomplete="off"></label>
<label>Bereik <input type="range" min="0" max="100" value="50" autocomplete="off"></label>
<label>Datum <input type="date" autocomplete="off"></label><datalist>
Ingebouwde autocomplete-suggesties, zonder dat er een dropdown-bibliotheek nodig is. (MDN)
Waarschuwing! De ondersteuning hiervoor is nog vrij inconsistent over verschillende invoertypes, en er zijn ook een aantal problemen in de browserimplementaties. Zie Adrian Roselli’s Under-Engineered Comboboxen voor meer informatie. Het is wellicht verstandig om dit voorlopig over te slaan en de komende jaren in de gaten te houden of het verbetert.
Voorbeeld:
<label>Favoriet HTML-element <input type="text" id="example-datalist-input" list="example-datalist" autocomplete="off"></label>
<datalist id="example-datalist">
<option value="a">
<option value="abbr">
<option value="address">
<!-- ... -->
</datalist>***
Geschreven en gebouwd door Chris Burnell voor HTML Day 2026 tijdens het online event georganiseerd door Zachary Kai op zaterdag 8 augustus 2026.
Correcties of aanpassingen aan deze pagina zijn welkom! Ik ben geen expert, maar ik heb geprobeerd de zaken eerlijk weer te geven. Gebruik deze pagina niet om beslissingen aan je baas (of jezelf) te rechtvaardigen. Vergeet niet dat niet iedereen het web op dezelfde manier ervaart als jij. En veel plezier met deze nieuwe functies van HTML!
Groetjes,