Web design trends en toekomst (deel 1 van 2): HTML5 - okt 27

Levenslang leren

Het heeft geen zin om het te ontkennen: webdesign en webontwikkeling evolueren snel, érg snel. Wat je gisteren net geleerd hebt is bij wijze van spreken morgen al achterhaald. Levenslang leren is dan ook een voorwaarde om je profiel binnen deze sector sterk te houden. Zo staan de blogs en RSS-feeds momenteel tjokvol met artikels over HTML5 en CSS3: de volgende versie van het vaste wapenarsenaal van elke webdesigner.

Het continu opdoen van nieuwe ervaring en kennis is cruciaal, maar het kan tegelijkertijd ook erg overweldigend en vermoeiend zijn. Daarom dien je zelf uit te maken in welke materie je jezelf wil specialiseren en welke ontwikkelingen je al dan niet wil opvolgen. En voor wie nu reeds twijfelt of het lezen van dit artikel wel de moeite waard is: ja, HTML5 en CSS3 zouden wel degelijk op uw lijstje met te volgen ontwikkelingen moeten staan ;).

In deze eerste van twee blogposts trachten we een duidelijke introductie te geven over HTML5. In ons volgend artikel gaan we in meer detail in op CSS3. Dit artikel is geen uitputtende lijst met alle nieuwigheden die in HTML5 te zien zullen zijn, helemaal niet. Wel geeft het een indruk van wat we de komende jaren kunnen verwachten en hoe we nu al gebruik kunnen maken van enkele leuke vernieuwingen.

HTML5?

Webdesigners die hun vak ernstig nemen weten dat een goede website opgebouwd wordt met geldige, “valide” tags. Mijn studenten in Interactive Multimedia Design worden dan ook vanaf dag één verplicht om webstandaarden te volgen, in het begin vaak tot hun grote frustratie.

Correct opgebouwde HTML, in combinatie met een goede CSS-reset en geldige CSS-opmaak, zorgt ervoor dat we zoveel mogelijk verschillen tussen browsers kunnen uitschakelen en dat onze websites pixel-perfect getoond worden op Mac, Windows, Linux, Firefox, Safari, ... enzovoort. Oh ja, ook in Internet Explorer. Is er met de opkomst van HTML5 dan reden tot paniek? Gaan onze huidige websites blijven werken? Blijft de aarde bestaan?

Wat is het verschil tussen HTML5 en xHTML?

Daar waar xHTML ons verplicht om onder meer alle tags netjes te sluiten en om alle attributen lowercase te schrijven, is dit niet meer verplicht in HTML5. Het is echter nog wel perfect mogelijk. HTML5 is met andere woorden volledig achterwaarts compatibel met wat we momenteel reeds kennen en gebruiken. Het is best mogelijk om in HTML5 alle tags in grote letters te schrijven of om tags zoals een break niet af te sluiten, maar wie het gewend is om netjes xHTML te schrijven, kan dit gewoon blijven doen.

Zelf hebben we de (goede) gewoonte te werken in xHTML-strict en deze manier van werken bevalt ons bovendien enorm. Daarom is het voor ons en vele andere webontwikkelaars logisch om op die manier te blijven verder werken, zelfs wanneer HTML5 met zijn losse regels op de proppen komt.

Dat is meteen een groot verschil tussen HTML5 en xHTML: je hebt de keuze om te werken op die manier die het best aansluit bij jouw voorkeuren, of dit nu xHTML-strict is of niet. Even terzijde: er wordt gezegd dat deze losse regels (keuze xHTML of niet) in HTML5 werden geïntroduceerd om zo een voldoende groot publiek achter deze nieuwe standaard te krijgen.

xHTML leeft dus in ieder geval lekker voort in HTML5 en wie gewoon is om strakke xHTML te schrijven kan hier perfect mee verder gaan. Bestaande websites zullen dan ook erg snel omgezet kunnen worden naar HTML5 indien gewenst. Het is dus niet zo dat je alles over boord dient te gooien wat je tot nu toe beheerst, integendeel.

HTML5 Doctype

De nieuwe HTML5-specificatie werd (en wordt nog steeds) ontwikkeld om het leven van webontwikkelaars er eenvoudiger op te maken. Zo werd ook de doctype-definitie onder handen genomen. De nieuwe doctype in HTML5 zal er als volgt uitzien, kort en simpel:

Het voordeel van deze doctype is dat de huidige moderne browsers (IE, FF, Opera, Safari) pagina’s met deze DTD zullen tonen in hun (full) standards modus, zelfs indien ze nog geen HTML5 kennen. Het is dus perfect mogelijk nu al nieuwe pagina’s te ontwikkelen met dit doctype. Zelfs de w3-validator ondersteunt momenteel reeds HTML5!

Nieuwe tags en mogelijkheden

Bekijk volgende structuur eens even. Looks familiar?

Hoe vaak heb je zelf al dezelfde of een soortgelijke structuur gebruikt om een webpagina uit te bouwen? Vaak? Dan ben je alvast niet alleen. Jammer genoeg zijn al die verschillende div’s weinig betekenisvol voor onze browsers. Een div blijft namelijk gewoon een div. Ook zoekmachines kunnen momenteel onmogelijk uitmaken of een div nu bijvoorbeeld gebruikt wordt als navigatieblok of als introductieblok bij een artikel of als footer of als ...

Om onze pagina’s meer betekenis te kunnen geven introduceert HTML5 enkele nieuwe tags. Vergelijk bovenstaande structuur maar eens met dezelfde (doch iets uitgebreidere) structuur in HTML5:

Deze manier van werken lijkt erg hard op de manier waarop we momenteel reeds websites bouwen. Bovendien zijn de tags veel betekenisvoller geworden. Let op: de header-tag wordt niet enkel gebruikt om de bovenste zone van uw webpagina aan te duiden. De tag kan meerdere keren in één pagina gebruikt worden, bijvoorbeeld om de hoofdingen van artikels op te bouwen. Hetzelfde kan gezegd worden van de footer-tag.

Kan je nu al starten met HTML5?

Kort gezegd: ja. Het is al mogelijk om een layout op te bouwen met HTML5 (en CSS3) die prima werkt in de huidige moderne browsers. Hoewel er enkele beperkingen zijn, zijn er al heel wat experimentele uitwerkingen van HTML5-layouts beschikbaar.

Besef wel dat HTML5 nog steeds niet officieel werd uitgebracht en dat er wijzigingen aan de huidige specificaties kunnen worden aangebracht. Volledige support van alle HTML5-features op alle browsers is er nog niet en dat zal nog een tijdje zo blijven. Desondanks is het zeker geen slecht idee om de mogelijkheden van HTML5 reeds te verkennen. Hoe meer mensen zich op HTML5 storten, hoe sneller de specificaties hopelijk klaar zullen zijn en wijdverspreid raken.

Extra informatie en bronnen

GoodBytes: Web design trends en toekomst (deel 2 van 2): CSS3
Sitepoint: Sitepoint: HTML5: now or never?
Smashing Magazine: Smashing Magazine: comic strip xHTML vs. HTML5
A List Apart: Semantics in HTML5
Woork: HTML5 Visual Cheat Sheet