Semantisch web: HTML5 semantische elementen
Image by Régis Gaidot via Flickr
Met de komst van HTML5 zijn er verschillende manieren om je code ‘leesbaarder’ te maken voor bijvoorbeeld zoekmachines. Dit verbeterd niet alleen de SEO van de website, maar ook de mogelijkheden om de data machinaal te interpreteren. Omdat het begrijpen van teksten een van de moeilijkste dingen is om te automatiseren is er nu de mogelijkheid om in je code beter aan te geven wat een bepaalde tekst nou is.
HTML is de Markup, css het design
In de HTML5 standaard zitten enkele opmerkelijke nieuwe elementen. Waar HTML vroeger zich nog met de stijl wou bemoeien, is deze taak nu volledig bij CSS komen te liggen. De focus van html komt dus op structuur te liggen. Om die focus extra kracht bij te zetten zijn er enkele structuur elementen geïntroduceerd . Deze doen in principe niks voor je weergave (je kan ze wel in CSS gebruiken) maar structureren de verschillende onderdelen van je HTML document.
<section>
Het section element is een onderverdeler voor content. Als algemene regel kan je gebruiken dat elk blok dat een heading heeft een section is. een section bestaat dus typisch uit een titel en een stuk content. Sections kunnen ook een scope krijgen, hierover later meer. Voorbeelden van een section is bijvoorbeeld een hoofdstuk.
<nav>
Het nav element is het element waarbinnen navigatie valt. Eigenlijk elk element waarbinnen meerdere links naar interne pagina’s worden weergegeven kunnen ontsloten worden met het nav element. Er kunnen meerdere navigatie-blokken op een pagina aanwezig zijn.
<article>
Het artikel element ontsluit een geheel artikel, bijvoorbeeld een nieuws artikel, en weblog artikel of een reactie. Als vuistregel kan gebruikt worden dat een <article> tag wordt gebruikt om elk zelfstandig stuk inhoud.
Verschil tussen <article> en <section>
Article wordt vaak verward met <section> en uiteindelijk ook met de vertrouwde <div>. Daarom de volgende regels:
- Is het blok logisch als je het leest buiten zijn eigen context, dus bijvoorbeeld in een rss-lezer, dan gebruik je <article>
- Als het blok gerelateerd is aan de content van de pagina gebruik je section.
- voor de rest gebruik je <div>
<section> <h1>Artikelen over: Fruit</h1> <article> <h2>Appel</h2> Een appel komt van een appelboom...</article><article> <h2>Sinaasappel</h2> De sinaasappel is een oranje ronde vrucht met...</article><article> <h2>Banaan</h2> Waarom zijn bananen eigenlijk krom, dat komt omdat...</article></section>
Andersom bestaat ook, dat sections onderdeel kunnen zijn van een artikel, het globale artikel is logisch op zichzelf staand. Daarin zitten losse secties met eigen headers.
<article> <h1>Soorten appel</h1> een appel komt van een appelboom waar... <section> <h2>Golden Delicious</h2> Deze vinden we vaak terug in de supermarkt en...</section><section> <h2>Granny Smith</h2> Zeer zure groene appels di...</section></article>
<aside>
Het aside element bevat onderdelen die gerelateerd zijn aan de pagina-content maar zijdelings bij horen. Een typisch gebruik van <aside> is bijvoorbeeld een linker of rechterbalk naast de content met gerelateerde links of advertenties.
<hgroup>
hgroup definieert een blok waarbinnen meerdere headings worden gebruikt. Zo kan bijvoorbeeld een kop en subkop worden gecombineerd in 1 hgroup.
<header> <hgroup> <h1>Mijn hoofdkop</h1> <h2>Met daaronder een tagline bijvoorbeeld</h2> </hgroup> </header>
<header>
Het header element moet niet verward worden met het <head> element. Header geeft de content-header weer. In een typisch design zal dit het blok kunnen zijn dat de banner weergeeft bijvoorbeeld, plus logos en het zoekformulier. Daarnaast kunnen sections, articles en dergelijke ok weer headers bevatten.
<footer>
De footer is de footer van de website. Dit blok bevat bijvoorbeeld de copyright informatie, soms ook links.
Internet Explorer en semantische html5 blokken
Internet Explorer heeft de vervelende gewoonte om blokken standaard de display van inline te geven. Hierdoor krijgen de blokken een vreemde positionering. In de meeste reset CSS voorbeelden wordt er ook meteen werk van gemaakt om de blokken een standaard display block te geven.
header, footer, article, section, nav, menu, hgroup {
display: block;
}
De oudere internet explorer die we nog vaak tegenkomen heeft ook nog geen flauw benul van deze nieuwe elementen. Gelukkig kunnen we in javascript makkelijk nieuwe elementen definiëren.
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
Het nut
Nu zijn er velen die zich “afvragen, wat is het nut” Maar er zijn al veel applicaties en crawlers die zich voeden met deze informatie. Een mobile browser weet dat het het kan zoomen op het article en wat er bijzaak is, Zoekmachines weten dat welke onderdelen relevant zijn voor die pagina, en welke onderdelen niet. Daarnaast ziet de code er ook voor het menselijk ook begrijpelijk uit en kan css netjes onderverdeeld worden.
Wordt vervolgd
Binnenkort op netsetters, alles wat je wilde weten over microdata in HTML5
[...] Zoekmachines proberen de teksten op de website te interpreteren. Door het gebruik van de semantische tags in HTML5 kunnen we de inhoud iets verder specificeren. Met gebruik van Microdata wordt precies aangegeven [...]