20 HTML5-tags die je moet kennen: layout, media en functies

We lopen samen een lijst van 20 HTML5-tags langs, sommige bekend en andere veel minder, plus hun ondersteuning in de browsers Chrome, Firefox, Safari en Internet Explorer.

8 layouttags

Deze tags staan er vooral om zoekmachines je site beter te laten lezen.

<article> – Bepaalt de plek van een artikel, een blog- of forumreactie, meestal bestaat het uit een titel en een alinea.
<section> – Bepaalt een sectie rond één thema. Een <article> kan uit meerdere thema’s ( <section> ) bestaan, en omgekeerd geldt hetzelfde. Ook een sectie heeft een titel en een inleiding. Je geeft haar een label met het attribuut aria-label.
<aside> – Bepaalt een sectie die naast je hoofdinhoud hoort te staan, ideaal voor sidebars of advertentieblokken.
<figure> – Figure is een container die samenwerkt met de tag <figcaption>: figure toont een afbeelding of een video met daaronder een bijschrift ( <figcaption> ).
<footer> – Bepaalt de plek van de voettekst van je pagina.
<header> – Bepaalt de plek van de kop van je pagina.
<hgroup> – Een tag om meerdere titels te groeperen ( <h1> tot <h6> ).
<nav> – Staat voor een sectie met links. Je ziet hem vaak in de <header> voor het hoofdmenu, of in de <footer> voor de juridische vermeldingen en dergelijke.

4 mediatags

<video> – Toont een videospeler in HTML5, de bron van je video geef je op met het attribuut src.
<audio> – Hetzelfde als de vorige tag, maar dan uitsluitend voor een audiobestand.
<picture> – De minst bekende, want in sommige browsers nog experimenteel: met <picture> zet je verschillende <source>-elementen klaar voor één <img>, waarna de browser op basis van de resolutie de meest passende afbeelding kiest.
<source> – Bepaalt verschillende bronnen voor mediabestanden, je gebruikt hem met <video>, <audio> en <picture>.

8 functionele tags

<details> – Hoort samen met <summary>: met deze tag maak je uitklapbare inhoud.

Wat details

Meer info over die details.
<dialog> – Dialog is een native modaal venster in HTML5.
Example from Mozilla –

by Damien Flandrin (@dam62500) on CodePen.
<embed> – Met de tag embed zet je een container neer om externe bronnen te tonen. Hij werd onder meer voor Flash gebruikt, en ook voor SVG, al kies je daarvoor liever andere methodes.
<mark> – Hiermee kun je je tekst markeren.
<meter> – Staat voor een meter tussen twee vaste waarden.
Example from Mozilla – by Damien Flandrin (@dam62500) on CodePen.
<progress> – Vergelijkbaar met <meter>, maar dan voor een voortgangspercentage.
Example from Mozilla – by Damien Flandrin (@dam62500) on CodePen.
<time> – Geeft een datum semantisch weer, als attribuut accepteert hij datetime.
html
```
<p>Le concert a eu lieu le<time datetime="2001-05-15T19:00">15 Mai</time>.</p>
```
<wbr> – Een van de minst bekende HTML5-tags, maar wel handig: met <wbr> vertel je je browser dat hij indien nodig op die plek mag afbreken naar een nieuwe regel.

···

Deze tags gaan ervan uit dat je de basis van de taal beheerst. Ben je net begonnen, start dan bij de 7 dingen die je moet weten voordat je HTML leert: het vocabulaire, het skelet van een document en de semantische structuur.

HTML