HTML5 voegde veel nieuwe elementen en API’s toe om websites moderner, gebruiksvriendelijker en semantischer te maken. Hieronder de belangrijkste functies en voorbeelden.
Nieuwe semantische elementen
| Element | Beschrijving | Voorbeeld |
|---|---|---|
<header> | Kopgedeelte van een pagina of sectie | <header><h1>Titel</h1></header> |
<footer> | Voettekst van pagina of sectie | <footer>© 2025 HTMLhulp</footer> |
<article> | Zelfstandig artikel, blog of nieuwsbericht | <article><h2>Nieuws</h2></article> |
<section> | Themagedeelte van een pagina | <section><h2>Over ons</h2></section> |
<nav> | Navigatiegedeelte | <nav><ul><li>Home</li></ul></nav> |
<aside> | Zijdelingse inhoud (sidebar, tips) | <aside>Extra info</aside> |
<main> | Hoofdinhoud van de pagina | <main>...</main> |
Formulieren & invoertypes
| Feature | Beschrijving | Voorbeeld |
|---|---|---|
type="email" | Automatische validatie van e-mail | <input type="email"> |
type="url" | URL-validatie | <input type="url"> |
type="date" | Datumkiezer | <input type="date"> |
type="time" | Tijdkiezer | <input type="time"> |
type="number" | Alleen cijfers toegestaan | <input type="number" min="1" max="10"> |
type="range" | Slider (bereik) | <input type="range" min="0" max="100"> |
placeholder | Hint in veld | <input type="text" placeholder="Typ je naam"> |
required | Verplicht veld | <input type="text" required> |
Multimedia
| Element | Beschrijving | Voorbeeld |
|---|---|---|
<audio> | Audio zonder externe plugins | <audio controls src="geluid.mp3"></audio> |
<video> | Video zonder plugins | <video controls src="video.mp4"></video> |
<track> | Ondertiteling bij video/audio | <track src="ondertitels.vtt" kind="subtitles" srclang="nl"> |
<canvas> | Tekenen en animaties met JavaScript | <canvas id="mijnCanvas"></canvas> |
<svg> | Vectorafbeeldingen in HTML | <svg><circle cx="50" cy="50" r="40"/></svg> |
API’s in HTML5
| API | Beschrijving | Voorbeeld |
|---|---|---|
| Geolocation API | Locatie gebruiker ophalen | navigator.geolocation.getCurrentPosition(...) |
| LocalStorage | Data lokaal opslaan in browser | localStorage.setItem("naam","Dave"); |
| SessionStorage | Tijdelijke opslag (tot tab sluiten) | sessionStorage.getItem("naam"); |
| Web Workers | Scripts draaien op achtergrond | new Worker("worker.js"); |
| Drag & Drop | Sleepbare elementen | draggable="true" |
| History API | Browsergeschiedenis manipuleren | history.pushState(...) |
Nieuwe attributen
| Attribuut | Beschrijving | Voorbeeld |
|---|---|---|
autofocus | Veld automatisch geselecteerd bij laden | <input type="text" autofocus> |
autocomplete | Browser suggereert waarden | <input type="email" autocomplete="on"> |
pattern | Regex-validatie | <input type="text" pattern="[0-9]{5}"> |
download | Bestand downloaden via link | <a href="file.pdf" download>Download</a> |
Graphics & offline
| Feature | Beschrijving | Voorbeeld |
|---|---|---|
<canvas> | Dynamische graphics en animaties | ctx.fillRect(0, 0, 100, 100); |
<svg> | Vectorafbeeldingen direct in HTML | <svg><rect width="100" height="50"/></svg> |
| Offline caching (Service Workers) | Offline webapps | navigator.serviceWorker.register("sw.js") |
Best practices
Gebruik semantische elementen voor duidelijke structuur.
Vervang oude Flash-content door
<audio>en<video>.Gebruik nieuwe invoertypes in formulieren voor betere validatie.
Combineer HTML5 met CSS3 en JavaScript voor moderne webapps.
Test altijd in meerdere browsers: niet alle features werken overal gelijk.