HTML5 bevat een hoop toekomst muziek, vooral als je Internet Explorer gebruikt. Er is op dit moment echter een element van HTML5 wat al wel overal gebruikt kan worden: de nieuwe opmaak tags.
De nieuwe tags hebben allemaal een speciale betekenis (ze zijn semantisch). Dat is niet nieuw in HTML. Zo geeft de
<h1> tag aan dat de tekst in die tag de meest belangrijke titel van de pagina is en de
<h2> tag is daarna de meest belangrijke titel.
De nieuwe tags in HTML5 hebben betrekking op algemene opmaak van de pagina. Waar we nu een hele berg
<div> tags met CSS classes gebruiken, maken we in de toekomst pagina's direct op met de nieuwe tags.
De belangrijkste nieuwe opmaak tags zijn:
- <header>
- <section>
- <footer>
- <aside>
- <nav>
- <article>
- <figure>
Het gebruik van de tags kun je wel raden. Bijna iedere webpagina heeft een kop (header), voet (footer), zijbalk (aside), navigatie (nav) en hoofdinhoud (article). De hoofdinhoud is weer in verschillende secties op te delen (section) en soms heb je ter verduidelijking een afbeelding of grafiek nodig (figure). De tags dienen precies voor die pagina onderdelen.
Het directe voordeel voor ons als ontwikkelaar is dat de opmaak code veel duidelijker wordt. Bij het werken met div's zijn alle afsluit tags hetzelfde, namelijk
</div>. Waar de div met de class "article" ophoudt is moeilijk te achterhalen, zelfs met goed inspringen van de code. HTML5 tags maken dit veel makkelijker.
<article> wordt afgesloten met
</article>.
Het voordeel voor de klant is nog groter. Zoekmachines weten nu precies waar ieder blok tekst voor staat en wat belangrijk is. Dit was eerder te gokken aan de hand van de CSS class, maar nu zijn de links in
<nav> altijd de navigatie links. De inhoud van
<article> is de meest belangrijke inhoud van de pagina en in
<aside> staan zaken waar minder nadruk op ligt.
Ook browsers maken gebruik van de nieuwe tags. Zo heeft
Safari 5 (de laatste versie van Apple's browser) een Reader functie. Door op een knop te klikken schakelt deze functie in: De tekst uit de
<article> tag wordt uitgelezen, opgemaakt in een mooi, leesbaar en groot font en als een pagina over de echte webpagina heen gelegd.
Er zijn nog veel meer nieuwe tags die niet direct iets met de hoofd opmaak van een pagina te maken hebben. Bijvoorbeeld
<video>,
<audio>,
<canvas>,
<samp> en
<progress>. Ook deze tags geven duidelijk de betekenis van de inhoud aan.
We hebben al enkele websites gemaakt met de nieuwe HTML5 tags. Om ze te laten werken in Internet Explorer is een klein beetje javascript nodig, maar dat weegt niet op tegen de voordelen: duidelijkere code en betere zoekmachine indexering.
Posts
