HTML5: Nieuwe elementen, compatibility, voorbeelden

HTML5 staat voor HyperText Markup Language 5 en is de opvolger van het in 1997 geïntroduceerde HTML 4. HTML 5 is nog niet afgerond, desalniettemin kunnen de meeste moderne webbrowsers zoals Firefox en Google Chrome er al aardig mee overweg. In dit artikel wordt gekeken naar de nieuwe toepassingen en tags die HTML 5 biedt ten opzichte van HTML 4 / XHTML en andere programmeertalen, wordt de compatibility met de meest gebruikte browsers onderzocht en zullen enkele voorbeelden worden laten zien.

Wat moet je weten voor je begint met coderen in HTML 5?

Ten eerste is HTML 5 geen andere codeertaal, HTML 5 is hetzelfde als HTML 4, alleen heeft HTML 5 een aantal extra functies. De extensie van een HTML5 document blijft dan ook gewoon .htm of .html. Wanneer je een website hebt die volgens de HTML 4 richtlijnen werkt, zal deze het ook exact hetzelfde doen in HTML 5. Een voorbeeld: HTML5 ondersteunt alle form tags uit HTML4, maar heeft een aantal extra input attributen. Zo kun je bijvoorbeeld eenvoudig een datumkiezer in een tekstveld inbouwen. Zolang de browser van je bezoeker HTML5 compatible is, zal je met behulp van de datumkiezer een datum kunnen aanklikken. Zo niet, dan kun je de datum altijd nog gewoon intypen, omdat aan het het input type tekstveld zelf niks is veranderd. Hetzelfde principe dat ervoor zorgt dat je in een HTML5 document alle elementen uit HTML4 en eerder kan gebruiken, zorgt ervoor dat HTML5 hoogstwaarschijnlijk zal blijven bestaan zolang internet nog bestaat. Hoog tijd om je in de extra opties binnen HTML5 te verdiepen dus.

Wanneer is een document HTML5?

Een document is een HTML5 document wanneer er bovenaan alle code de volgende regel staat. Deze regel specificeert het doctype (document type) naar HTML5.


Officieel is het document nu HTML5, het spreekt voor zich dat om hier nu ook echt wat mee te doen, je HTML5 functies in je script moet gaan stoppen.

Nieuwe functies in HTML5

Een aantal belangrijke en veelbesproken nieuwe functies die HTML5 met zich mee zal brengen, wordt hieronder nader toegelicht.

Maak je tekst bewerkbaar

Dit nieuwe attribuut kan worden verbonden aan elk element en zal de gebruiker de tekst op de website kunnen laten aanpassen. In het voorbeeld hieronder zal de inhoud van een paragraaf bewerkbaar zijn.

Formulier verificatie

Wanneer in een formulier een emailadres ingevuld moet worden, kun je een input-veld toevoegen met het nieuwe type ‘email’. Dit controleert bij het ingevulde emailadres automatisch of het wel een echt emailadres is.


Wanneer je wilt dat de bezoeker van het formulier zijn emailadres ook daadwerkelijk invult, kun je het nieuwe ‘required’ attribuut toevoegen:

Value laten staan

In HTML4 had je het value attribuut om een standaard tekst in een input-veld te laten zien, als je in het veld klikte, ging de tekst weg en kwam niet meer terug. Het nieuwe attribuut “placeholder” zorgt ervoor dat bij lege input-velden telkens een bepaalde tekst komt te staan.

Heading groeperen

In HTML5 kun je met het nieuwe element “hgroup” meerdere koppen groeperen als deze bij elkaar horen.

Markeren van tekst

Dit element voegt niet heel veel toe, maar maakt bijvoorbeeld highlighten van zoekopdrachten eenvoudiger.

Audio ondersteuning

Samen met “video” en “canvas” (zie hieronder) een van de meest begeerde nieuwe elementen in HTML5. Waar in HTML4 en eerder nog op third-party plugins moest worden vertrouwd bij het implementeren van geluid op een webpagina, kan HTML dit nu zelf:

Video ondersteuning

Werkt ongeveer hetzelfde als het “audio” element, laat videobestanden zien op een website zonder tussenkomst van derde partijen.

Tekenen in een website

Het nieuwe element “canvas” zorgt voor meer dynamiek in een website. Het kan bitmap afbeeldingen automatisch renderen met behulp van javascript. Het biedt bijvoorbeeld de mogelijkheid om te tekenen op een website waarbij met javascript een lijn wordt gezet tussen twee punten. Veel is er over het “canvas” element echter nog niet bekend.

Compatibiliteit HTML5

HTML5 is nog niet helemaal klaar, maar werkt desondanks toch in een aantal meewerkende browsers.
Google Chrome van alle browsers het best omgaan met HTML 5. Zo kan versie 5.0.375.55 van Google Chrome onder andere het canvas en video element perfect aan, de form-attributen en het audio element gaan ook wel aardig.
Safari (4.0.5) doet het iets minder goed dan Chrome, zo gaat ook het video element naast audio en form nog niet perfect. Canvas werkt wel optimaal.
Opera (10.53) werkt daarnaast wel weer perfect met audio, video en canvas, maar kan ook een heleboel niet goed tot helemaal niet aan.
Mozila Firefox (3.6.3) werkt prima met onder andere canvas, maar nog niet super met audio en video.
Internet Explorer (8.0.7600) is nog lang niet HTML5-ready. Wel kan deze browser, net als alle andere, het nieuwe doctype van HTML5 aan. Begin daarom vanaf nu met het vervangen van je oude HTML4 of XHTML1 doctype naar HTML5. Het kan geen kwaad en je bent alvast voorbereid op wat komen gaat.

Voorbeelden HTML5 websites

Algemene voorbeelden per element: http://www.html5demos.com/
Audio en twitter in een zeer dynamische website: http://www.9elements.com/io/projects/html5/canvas/
Wat je allemaal wel niet met canvas kunt: http://www.canvasdemos.com/