HTML5: wel of niet gebruiken?

In het tweede deel van deze reeks over HTML5 kijken we naar de belangrijkste veranderingen die deze versie met zich mee brengt en of het zinvol is om hier al mee aan de slag te gaan.

Welke vernieuwingen vallen er onder HTML5?

Zoals in het vorige artikel besproken is de term HTML5 ambigu. Officieel vallen onder de HTML5 specificatie alleen toevoegingen op het gebied van HTML zoals tags, attributen en selectors. In de praktijk worden vaak ook verbeteringen op het gebied van CSS3 en hele nieuwe features zoals WebMV, Geolocation en Websockets onder deze noemer geschaard. In dit artikel bespreek ik de volgende belangrijke vernieuwingen:

• Nieuwe HTML toevoegingen (semantische elementen, formulieren, multimedia)
• Verbeteringen voor browserapplicaties (offline, caching, client side database)
• CSS3 vernieuwingen (gradients, schaduwen en transitions)

Deze zaken vallen dan wel niet allemaal officieel onder “HTML5” maar zorgen wel parallel aan elkaar voor een verbeterde browser ervaring in de toekomst, zowel vanuit het oogpunt van ontwikkelaars als gebruikers. Wat volgt is een tipje van de ijsberg, want de lijst met nieuwe features is gigantisch.

Nieuwe HTML elementen, tags en attributen

Semantisch elementen

De nieuwe HTML tags zorgen er o.a. voor dat content op een webpagina van meer context wordt voorzien door enkele aanvullende semantisch elementen. Door deze extra informatie kan HTML content door externe applicaties makkelijker worden verwerkt. Applicaties kunnen informatie namelijk pas “begrijpen” wanneer deze is gestructureerd volgens vaste regels. Zo ziet een zoekmachine geen verschil tussen meta-informatie en daadwerkelijk pagina content wanneer dit niet gemarkeerd is met HEAD en BODY tags.

HTML5 voegt enkele extra semantische elementen toe om content op een pagina van betekenis te voorzien. Hieronder vallen onder andere de SECTION, ARTICLE, HEADER, FOOTER, NAV, TIME en ADRESS tags. Een of meerdere articles zijn onderdeel van een section, en elk artikel heeft een header met daarin informatie als de titel en datum. Auteur en copyright gegevens kunnen binnen een footer element worden geplaats. De tijd en datum van een artikel bevindt zich binnen de TIME tags. Tussen NAV tags bevinden zich menu links en tussen ADRESS contactgevens.

Met deze op XML geïnspireerde verfijning kunnen zoekmachines en andere externe applicaties de inhoud van een pagina beter begrijpen. Deze elementen worden door alle moderne (en mobiele) browsers ondersteunt, helaas niet door IE 7 en 8. Wil je je DIV tags toch zoveel mogelijk gaan vervangen door deze nieuwe opmaak elementen dan kun je dit doen met behulp van Modernizr.

Eigentijdse webformulieren

Webformulieren zijn tegenwoordig vaak voorzien van simpele scripts om bijvoorbeeld te controleren of alle noodzakelijke velden zijn ingevuld, en komen gebruikers tegemoet met een autocomplete en/of spellinscontrole. Met nieuwe HTML5 attributen als autocomplete="on|off", spellcheck="true|false" en required="required" kun je heel simpel met HTML voor elkaar krijgen.

Een van de nieuwe form tags is DATALIST, waarmee je een keuzelijst kunt opmaken met voorgedefinieerde opties. Browser ondersteuning voor DATALIST is er alleen voor Opera en Mozilla, voor andere browser is er een fallback mogelijkheid, maar beter kun je hier nog even mee wachten.

Wat betreft de attributen kan het geen kwaad om deze alvast te gebruiken: als ze er zijn is het makkelijk, zo niet dan breken er geen noodzakelijke functionaliteiten. Veel form attributen worden al ondersteund door browsers, alleen Internet Explorer loopt hierin achter.

Multimedia tags en attributen

Voor multimedia zijn er de AUDIO en VIDEO tags bijgekomen, deze worden door alle moderne browsers ondersteunt en zorgen voor een simplificatie wat betreft het toevoegen van video en audio bestanden:

<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
 <source src="song.mp3" type="audio/mpeg" />
 Your browser does not support the audio element.
</audio>

De bedoeling is dat alle browser in de toekomst het WebM formaat, dat speciaal is gebouwd voor video op het web, accepteren als universele standaard. Bekijk deze introductie video over WebVM voor meer informatie hierover. Ook voor audio is er nog geen universeel formaat, alles hierover lees je in dit uitgebreide artikel.

Met de video en audio tag komen een aantal property’s en events waarmee je de het gedrag van de player kunt beheersen met behulp van javascript. Hierdoor wordt het makkelijker om bijvoorbeeld afspeellijsten te maken of video's te doen afspelen na een bepaalde gebeurtenis. In combinatie met andere HTML5 technieken (zie hieronder) worden dan dit soort interactieve video's mogelijk.

Aangezien het converteren van je video naar meerdere formaten tijdrovend is, is het voorlopig een stuk makkelijker om je video’s te uploaden naar youtube (dat overigens al enige tijd bezig is met een een HTML5 experiment).

Browser applicaties

Veel van de overige aanpassingen, die onder HTML5 als verzamelnaam vallen, zijn ontstaan vanuit de behoefte van browserfabrikanten om browsers krachtiger te maken, in staat om veelzijdige applicaties te kunnen draaien zonder dat de gebruiker hiervoor eerst een plugin dient te installeren. Deze extra functies zijn vooral interessant voor web-ontwikkelaars. Ze zorgen voor betere integratie van programmeer talen en een efficiëntere verwerking hiervan, vooral doordat er minder verkeer is tussen client en server, en het verkeer dat er veiliger en sneller gebeurd.

Een van de redenen voor de extra snelheid is de mogelijkheid om data op te slaan in een database die zich niet op de server bevindt, zoals eerder altijd het geval, maar op de harde schrijf van de computer. Een extra voordeel hiervan is dat wanneer de verbinding verbreekt, alle informatie beschikbaar blijft zodat je offline door kunt werken. Tegelijkertijd zorgt de Websocket techniek voor betere communicatie tussen de browser en servers. Verder zijn er features zoals de Geolocation API waarmee de actuele locatie van een bezoeker kan worden achterhaald zodat bijvoorbeeld lokaal nieuws kan worden aangeboden via een applicatie. 

Met CANVAS en SVG zijn er twee nieuwe technieken om beeld weer te geven. Canvas is vooral geschikt voor snelle opeenvolgende beelden zoals games terwijl je met SVG dynamische vector afbeeldingen kunt weer laten geven die niet aan kwaliteit verliezen op het moment dat je in- of uitzoomed. Erg handig voor Google Maps-achtige applicaties, maar ook voor een (responsive) logo. Canvas en SVG ondersteuning is behoorlijk, hoewel IE ook hier weer aardig wat roet in het eten gooit. Voor SVG support in IE8 kun je als oplossing een javascript of jqeury library laden zoals raphael.js of jQuerySVG.js.

Volledige CSS3 ondersteuning 

Webdesigners krijgen door volledige ondersteuning van CSS3 meer mogelijkheden om een pagina vorm te geven zonder het gebruik van statische afbeeldingen en scripts. In plaats daarvan wordt de engine van de browser gebruikt om effecten dynamisch toe te passen.

Dat betekent minder photoshop werk om schaduweffecten en gradients te maken, deze bouw je simpelweg op in CSS met behulp van de box-shadow en gradient . Een blok of foto een aantal graden scheef draaien voor een speels effect doe je gemakkelijk met transform.

Zelfs vloeiende bewegings effecten kun je met CSS toepassen door middel van de transition functie. Hiermee maak je bijvoorbeeld soepele :hover effecten waarbij de kleur van een menu knop langzaam veranderd als je er overheen gaat, of dat deze knop geleidelijk aan groter wordt, wat je maar wilt.

Hoewel moderne browsers veel van deze effecten ondersteunen, vraagt bijna elke browser om een unieke CSS code. Dat betekent dat je elk effect op vier verschillende manier zult moeten invoeren. Om je dit saaie werk te besparen zijn er gelukkig automatische generators te vinden.

Browser adoptie

Actuele informatie over browser ondersteuning van HTML5 en andere toekomstige technieken is hier te vinden: 

• http://mobilehtml5.org/ - informatie over HTML5 support onder mobiele browsers
• http://caniuse.com/ - alle nieuwe elementen, tags en attributen op een rij met informatie over browserondersteuning
• http://html5accessibility.com/ - visueel overzicht van een selectie van HTML5 tags
• http://www.standardista.com/ - beantwoordt de vraag welke selectors worden ondersteunt (:after, :last-of-type, etc.)
• http://html5please.com/ - geeft een overzichtelijk visueel advies welke features je kunt gebruiken, met welke je moet oppassen en welke nog een no-go zijn.

Wil je zonder risico nieuwe features gebruiken beroep je dan op een Modernizr. Meer informatie over het gebruik hiervan lees je hier.

Wel of niet gebruiken?

Voor ontwikkelaars en projectmanagers van web- en mobiele applicaties veranderd er nog het meest. Zij doen er verstandig aan zich goed te verdiepen in de nieuwe materie, met name bij het werken aan projecten die nog jaren mee moeten gaan.

Als designer is het goed om je langzamerhand op de hoogte te stellen van alle nieuwe HTML tags, attributen en selectors en CSS3 functies. Browser ondersteuning is er niet in alle gevallen, vooral IE loopt achter en daarom is het voorlopig nog geen goed idee om alle veranderingen door te voeren. Maar CSS die verder geen functies breekt is geen probleem. Voor andere zaken zoals semantische elementen kun je een fallback gebruiken.

Werk je met een CMS dan doe je er verstandig aan voor modules en thema's te kiezen die HTML5 ready zijn. Hier zal ik in het laatste deel van deze reeks op in gaan.