HTML5: de nieuwe standaard

[Totaal: 1    Gemiddelde: 5/5]
HTML, de taal waarin alle websites zijn geschreven, heeft vanaf deze week officieel een nieuwe versie. Na bijna acht jaar werk heeft HTML5 de “Recommendation”-status gekregen, wat inhoudt dat het nu een officiële standaard is.

Waarom is dit belangrijk? Omdat HTML5 diverse grote wijzigingen bevat ten opzichte van de vorige versie, die het web enorm vooruit helpen. Hét kernwoord daarbij is semantiek.

Nieuwe elementen

Een HTML-pagina bestaat uit verschillende elementen, met verschillende betekenissen. Zo geeft het ul-element aan dat het om een unordered list (ongeordende lijst) gaat, het table-element wordt gebruikt voor een tabel, en het img-element voor een afbeelding. HTML5 voegt een aantal nieuwe elementen toe met nieuwe betekenissen die voorheen nog niet bestonden. Dit is vooral van belang voor zoekmachines en screenreaders – programma’s die een internetpagina voorlezen voor mensen met een (visuele) beperking.
Het nieuwe aside-element kan bijvoorbeeld gebruikt worden voor informatie die niet direct samenhangt met de hoofdinformatie – bijvoorbeeld een balk met contactgegevens. Een screenreader kan onderscheid maken tussen de hoofdinformatie (via het nieuwe main-element) en deze bij-informatie en voorrang geven aan de belangrijkste informatie. Het nieuwe nav-element (voor navigatie) draagt hier ook aan bij.

Omdat deze nieuwe elementen nog niet in alle browsers werken, kan het zijn dat onderstaande voorbeelden niet goed werken. Bezoek voor een optimale ervaring deze pagina in Chrome of Opera.

Media

Voorheen moesten vieze trucjes uitgehaald worden wanneer een webbouwer een onderschrift wilde toevoegen aan een afbeelding. Via de nieuwe figure- en figcaption-elementen kan dit nu op een nette manier die bovendien semantische informatie toevoegt. Wanneer een zoekmachine deze afbeelding “ziet” weet deze dat het onderschrift bij deze afbeelding hoort en dit kan getoond worden wanneer een gebruiker op afbeeldingen zoekt.

logo-html5
Het logo van OZOMedia met figure- en figcaption-elementen

Ook nieuw zijn de video- en audio-elementen, die het embedden van video- en audiobestanden stukken makkelijker maakt. Voorheen werd hier vaak Flash voor gebruikt.

Een andere plek waar Flash wordt ingehaald door nieuwe methoden is het nieuwe canvas-element. Dit element kan voor van alles gebruikt worden, van afbeeldingen tot video totcomplete spellen gebouwd met WebGL.

Webapplicaties

“Vroeger” bestond het internet voornamelijk uit pagina’s waar je informatie kon vinden. Naarmate internet op meer plekken beschikbaar en goedkoper werd (en de telefoonlijn niet meer constant in gebruik was) kwamen daar ook webapplicaties bij. Denk hierbij bijvoorbeeld aan internetbankieren, een digitale agenda of online spreadsheets. Ook voor webapplicaties bevat HTML5 een aantal verbeteringen, zoals ondersteuning voor voortgangsbalken (progress-element) of de uitkomst van een berekening (output-element).

75% voortgang in het nieuwe progress-element

Gebruikersgemak

Wie in het verleden een datum moest invoeren op een website liep vaak tegen problemen aan. Als het een Amerikaanse website was dan moesten data vaak ingevoerd worden als MM/DD/YYYY terwijl we in Nederland gewend zijn om data in te voeren als DD-MM-YYYY. HTML5 voegt de mogelijkheid toe om door de webbouwer een specifiek element in te stellen als datum, de browser weet vervolgens dat hij een kalender moet tonen wanneer de gebruiker een datum wil invullen:

Nieuwe datum- en tijdelementen

Hetzelfde geldt voor wanneer een gebruiker een e-mailadres moet invoeren, de browser kan direct kijken of deze correct is en hier melding van geven zonder eerst het hele formulier te hoeven sturen en de pagina te herladen. Ook bij getallen, telefoonnummers en kleuren is iets soortgelijks toegevoegd:

Nieuwe getal- en kleurelementen

De webbouwer kan nu ook van tevoren aangeven welke velden in een formulier zijn en welke niet. Wanneer de gebruiker het formulier verzendt zonder al deze velden in te vullen dan krijgt de gebruiker hier meteen een melding van, wederom zonder de pagina te herladen.
Ook is het mogelijk om aan te geven dat de browser bij een bepaald element – zoals een opmerkingenveld bij een contactformulier – spellingcontrole kan gebruiken en bij andere velden (voor- en achternaam) niet.

Stijling en scripting

In één zin met HTML5 worden vaak CSS3 en Javascript genoemd. Op het vlak van CSS (de stijling van een pagina) is de afgelopen tijd veel vooruitgang geboekt en er komen de komende tijd nog mooie dingen aan, zoals Flexbox – maar daar zullen we op een later tijdstip meer over vertellen.

Ook op het gebied van scripting is veel veranderd. Lange tijd werd Javascript gezien als een langzame taal, maar dat argument gaat tegenwoordig niet meer op. Vooral V8, de Javascript-engine van Google, heeft daaraan bijgedragen. Met de introductie van onderdelen uit Ecmascript 5 en (zeer recent) Ecmascript 6 wordt het voor ontwikkelaars alleen maar makkelijker om in Javascript mooie dingen te bouwen.

De toekomst

HTML 5.1 is inmiddels in de maak en ook die versie zal het web vooruit helpen. Eén van de dingen in HTML 5.1 die op dit moment al in diverse browsers werkt in het zogeheten scrset-attribuut voor afbeeldingen. Met dit attribuut kunnen verschillende afbeeldingen worden ingeladen voor verschillende apparaten. Een smartphone met een hogeresolutiescherm kan dan bijvoorbeeld een afbeelding in een hogere resolutie inladen dan een gewone pc met een (relatief) lage resolutie.

Simulatie van het verschil tussen een afbeelding in lage en hoge resolutie
srcset
Het HTML5-logo met gebruik van srcset

Conclusie

HTML5 is een grote vooruitgang voor het web, zowel voor webontwikkelaars als voor de surfende gebruiker. Over de verdere toekomst van HTML is nog weinig bekend, maar met grote partijen als Google, Microsoft, Apple, Opera en Mozilla achter de specificatie kunnen we er zeker van zijn dat het web de komende jaren alleen maar beter wordt!

Geef een reactie