HTML5 cursus

HyperText Markup Language revisie 5 (HTML5) is de laatste versie van de HTML taal, de code waarmee webpagina's worden opgebouwd. Het doel van HTML5 is om het gebruik van gesloten standaarden als Adobe Flash, Microsoft Silverlight en Sun JavaFX overbodig te maken. Kortom, HTML5 maakt het voor webpagina's mogelijk om tekst, multimedia, afbeeldingen en webapplicaties te tonen in een browser.

De voordelen ten opzichte van revisie 4 (HTML 4.01) zijn een grotere compatibiliteit met browsers van verschillende platformen (desktop, mobiel, pda, e-reader, etc.), nieuwe functionaliteit en betere laadtijden doordat er minder code gebruikt hoeft te worden.

Wat kan HTML5? In ieder geval een stuk meer dan het 'normale' HTML wat we kennen uit de eerste jaren van het internet. In deze HTML5 cursus geven we u een opsomming van de nieuwe mogelijkheden.

Video /Audio
Dit nieuwe HTML element is waarschijnlijk het meest besproken in webdeveloperland. Deze tags maken het mogelijk om een video- of audiobestand in een browser af te spelen zonder een externe speler. Je kan in HTML5 van deze tags gebruik maken indien je audiobestand van het type .ogg, .mp3, .wav of .aac is of het videobestand een .ogv of .mp4 (h.264) videoformaat is.
HTML5 voorbeeld video: klik hier
HTML5 voorbeeld audio: klik hier
Flash met HTML5 fallback: klik hier

Geolocatie
Voor het bepalen van een bezoekerslocatie ben je niet langer afhankelijk van externe API's of browseruitbreiding. D.m.v. een klein stukje javascript kun je de locatie van een bezoeker bepalen en deze data gebruiken om je content aan te passen.
HTML5 voorbeeld geolocatie: klik hier

Semantische opmaak
In de eerdere HTML-versies werd <div> gebruikt om een bepaald onderdeel van een pagina aan te duiden, waaronder de <h> header en de <p> paragraaf. Hierdoor werd het mogelijk om HTML-pagina's in blokken onder te verdelen. Semantische opmaak gaat verder en laat elementen van een pagina nader beschrijven door de nieuwe elementen zoals <article>, <section>, <aside>, <hgroup>, <dialog>, <footer>, <nav>, <time>, <mark>, <figure> en <figcaption> toe te voegen. Zo zijn er standaard meer mogelijkheden om webpagina's op te maken, wat tot gevolg moet hebben dat pagina's sneller laden en beter schaalbaar worden. Een voorbeeld van een site enkel bestaande uit deze semantische code is deze.

note: Sinds een jaar is 1 van de factoren welke van invloed is op je Google indexering de laaddtijd van je pagina. Aangezien je met HTML5 minder code nodig heb om iets te bereiken zal Google (en bezoekers van je website) dus ook sneller je pagina's kunnen laden waardoor je laadtijd omlaag gaat...en hiermee automatisch je SEO (Search Engine Optimization) verbeterd.
HTML5 voorbeeld: semantische opmaak

Formulier verbeteringen
HTML5 heeft nieuwe extra attributen, elementen en invoertypes t.b.v. webformulieren. Zo wordt bijvoorbeeld voor ontwikkelaars de mogelijkheid gegeven om een zoekveld, kalender of schaal binnen een formulier eenvoudig te integreren.
HTML5 voorbeeld formulier: klik hier

Canvas
D.m.v. van het element <canvas> kun je afbeeldingen in 2D Javascript tekenen. Dit is echter een taak voor de echte programmeur aangezien deze materie enigzins complex kan zijn... Op dit moment wordt het canvas element (nog) niet ondersteund door Internet Explorer.
HTML5 voorbeeld canvas: klik hier
HTML5 voorbeeld canvas: klik hier
HTML5 voorbeeld canvas: klik hier

Aanpasbare content
Het element 'contenteditable' laat gebruikers toe content op je website te laten veranderen. Je kan hiervoor ook nog eventueel wat Javascript toevoegen zodat de gebruiker dit kan doen in een WYSIWYG-editor.
HTML5 voorbeeld contenteditable: klik hier

Drag and Drop
Drag and drop, oftewel 'Pak en Sleep', is bedoeld om eenvoudig elementen binnen een webpagina te verplaatsen.
HTML5 voorbeeld drag and drop: klik hier

Persistant Data Storage
Persistant Data Storage is eigenlijk een nieuwe vorm van een cookie, oftewel een stukje code welke een browser achterlaat op de computer van de bezoeker om bepaalde statistieken uit de coockie te halen of bijvoorbeeld een voorkeursinstelling van de bezoeker. Bij persistant data storage zijn 2 nieuwe attributen, te weten 'sessionStorage' en 'localStorage'.
HTML5 voorbeeld persistant data storage: klik hier

Naast de bovenstaande nieuwe elementen biedt HTML5 ook ondersteuning voor offline webapplicaties. Hierdoor wordt het mogelijk om in documenten door te blijven werken zelfs wanneet het netwerk niet langer beschikbaar is, handig bij bijvoorbeeld Google Docs of Office Web Apps!

Hieronder hebben we nog een leuk lijstje met HTML5 websites:

Gerelateerde onderwerpen: