IE6 en IE7 herkennen elementen als <header> en <footer> niet, en geven deze niet goed weer. HTML5 is dus niet cross-browser, hoor ik je zeggen, maar dat is iets te snel geconcludeerd…

HTML5 geeft (meer) betekenis aan de content-elementen waardoor content beter (her)gebruikt kan worden. We wisten al dat een <p> een paragraaf was, maar nu weten we ook of het bij de <header> hoort (wanneer de <p> zich daarin bevindt). Erg belangrijk wanneer je de content wilt interpreteren en hergebruiken.

HTML5 isn’t a markup language,
it’s a mashup language…

In HTML5 wordt in plaats van <div id=”header”> vaak <header> gebruikt. Dit is waar het fout gaat. De vormgeving wordt hierdoor namelijk ook op deze nieuwe HTML5 elementen gebaseerd en dat werkt niet voor alle browsers. Dit geldt overigens voor alle nieuwe HTML5 elementen en niet alleen voor het <header> element uit dit voorbeeld.

Wat mij betreft heeft een <div> de betekenis van een element dat andere elementen kan groeperen of ordenen ten behoeve van de vormgeving. Hierbij zou ik de <div> dan ook het vormgevingselement willen noemen. Waar <p>,<h1>,<table> en <header> de content betekenis geven, geeft de <div> ordening en daarmee vormgeving aan.

Vanuit deze redenering is het vervolgens logisch om <div> elementen te combineren met de nieuwe HTML5 elementen, in plaats van deze erdoor te vervangen. Zet je de <header> in de <div id=”header”>, dan hebben IE6 en IE7 namelijk ineens geen enkel probleem meer met HTML5. De vormgeving wordt bepaald door de <div> en de betekenis van de content in het <div> element wordt bepaald door de HTML5 <header>.

Wij werken volgens deze filosofie. Wij gebruiken HTML5 voor het labelen van onze content, zodat deze meer betekenis krijgt en we gebruiken het <div> element voor de vormgeving. Hierdoor zijn al onze oplossingen 100% HTML5 en 100% cross-browser.