HTML 5.1 onthuld: 14 nieuwe features uitgelegd met praktische voorbeelden

W3C HTML 5.1 (nov 2016): eerste minor update in 2 jaar

Veel initiële features gedropt (onzinvol ontwerp, gebrek aan browserondersteuning). Toch nuttige toevoegingen: <dialog>, <details>, <summary>, <picture>. Check browserondersteuning voor productie.

14. Anti-phishing: rel="noopener"

target="_blank" stelt nieuwe tab in staat window.opener.location te wijzigen → phishing. Oplossing: rel="noopener" op <a>/<area> scheidt browser-contexten.

<a href="#" target="_blank" rel="noopener">Veilige link</a>

13. Flexibele <figcaption> plaatsing

Mag nu *overal* binnen <figure> (voorheen alleen eerste/laatste kind).

12. Spellcheck attribuut & forceSpellCheck()

spellcheck="true/false" op elementen. element.forceSpellCheck() forceert foutrapportage zonder focus.

11. Lege <option> toegestaan

Als kind van <optgroup>, <datalist>, <select>. Handig voor gebruiksvriendelijke formulieren.

10. allowfullscreen voor <iframe>

Boolean attribuut: toestaat requestFullscreen(). Nodig voor YouTube-embeds.

9. Geneste <header>/<footer> in <header>

Mag binnen sectionerende content (<section>, <article>). Uitgebreide semantische headers.

8. Nul-breedte/hoogte afbeeldingen

Voor niet-visuele doeleinden (tracking pixels). width="0" height="0" alt="".

7. Formuliervalidatie: reportValidity()

Valideert formulier, rapporteert fouten direct in browser. Meerdere constraint-violaties mogelijk.

6. Browser contextmenu via <menu>

<menu type="context" id="id"> met <menuitem> (radio, checkbox, command). Koppelen via contextmenu="id" attribuut.

5. Cryptografische nonce voor <script>/<style>

Eenmalig willekeurig getal per pagelading. Content Security Policy besluit of script/style uitgevoerd mag worden.

4. Herstel van rev-attribuut

rev op <a>/<link> voor reverse relatie (RDFa-ondersteuning). Voorbeeld: rel="next" rev="prev".

3. Tonen/verbergen: <details> & <summary>

Uitklapbaar blok. <summary> binnen <details>. Standaard verborgen.

2. Nieuwe input types: week, month, datetime-local

Dropdown-kalender voor week/maand. datetime-local: datum+tijd zonder timezone.

1. Responsive images zonder CSS

• srcset (x-descriptor): pixelratio-gebaseerd (1x, 2x, 3x)
• srcset (w-descriptor): breedte-gebaseerd (500w, 1000w, 1600w)
• sizes: viewport-breedte → ruimte voor afbeelding → keuze via srcset
• <picture> + <source media>: art direction per schermgrootte

Voorbeeld <picture> met media queries en fallback <img>.