De opbouw van een website is belangrijk. Niet alleen de buitenkant ('wat zien we als het webadres wordt ingetikt'), maar ook de binnenkant, de taal waarin de pagina geschreven is. Die taal en de manier waarop het opgeschreven is heeft onder meer gevolgen voor de indexering van een website door zoekrobots. Anne van Kesteren geeft een korte inleiding over de structuur van een website en laat zien dat alles draait om semantiek.
Door Anne van KesterenHTML wordt verkeerd gebruikt. De grootste kracht van HTML wordt miskend door het te gebruiken als een 'tool' om een pagina visueel goed te kunnen weergeven. De grootste kracht van HTML is echter semantiek. Pas wanneer je begrijpt wat semantiek is en dit gemakkelijk kunt toepassen op aangeleverde of zelfgecreëerde layouts zul je websites opleveren waar je meer aan hebt.
Semantische HTML zorgt er ten eerste voor dat je code overzichtelijk blijft. Waarschijnlijk zal dit je niet veel kunnen schelen en dat is begrijpelijk, want waarom zou je tijd investeren om iets te leren waarvan je het voordeel niet direct inziet? Een - veel genoemd - argument is dat semantische HTML leidt tot een betere toegankelijkheid. En hoewel dat niet voor elke website zal gelden (denk aan een intranet) is het toch erg belangrijk. De meest belangrijke bezoeker van je website is namelijk blind: Google.
Google zal je inhoud nooit letterlijk lezen, aangezien dat iets is wat voor computers zeer moeilijk is, vanwege de verschillende manieren waarop teksten kunnen worden geïnterpreteerd. Zoekmachines zullen je tekst alleen 'begrijpen' door de omliggende markup. Die geeft namelijk aan wat de betekenis is van een stuk tekst. Bekijk de volgende twee voorbeelden:
<h1>Koptekst</h1>
<p><b>Koptekst</b></p>
Als we vanuit het oogpunt van Google kijken zal deze de markup uit voorbeeld 1 zonder twijfel belangrijker vinden dan die uit voorbeeld 2. Voorbeeld 1 geeft aan dat het daadwerkelijk om een 'Koptekst' gaat. Bij voorbeeld 2 zie je dat alleen door te lezen, iets wat Google niet kan. Voorbeeld 1 is in dit geval dus de meest semantische oplossing en daar willen we uiteindelijk naartoe. Maar waaruit bestaat deze semantische oplossing dan precies? Eigenlijk is het simpel: bij het eerste voorbeeld wordt er gebruik gemaakt van het H1 element, welke volgens de specificatie gebruikt moet worden voor de meest belangrijke koptekst van de pagina. Bij het tweede voorbeeld wordt gebruik gemaakt van het P element, welke gebruikt wordt voor paragrafen en het B element, welke gebruikt wordt voor opmaak en daarom zoveel mogelijk ontweken dient te worden. Het B element voegt alleen stilistische informatie toe en die behoort niet in de markup thuis. Markup dient de browser te vertellen wat de structuur van het document is, niet hoe het document gepresenteerd wordt.
De designers onder ons zullen nadat ze voorbeeld 1 hebben getest (omdat dit blijkbaar beter is voor de indexering) wellicht geneigd zijn om gelijk weer terug te gaan naar 2, welke altijd al heeft gewerkt. Simpelweg omdat het H1-element standaard veel te groot is en er 'lelijk' uitziet. Gelukkig ondersteunen alle moderne browsers een taal voor presentatie waar je ongetwijfeld van gehoord hebt: CSS (Cascading Style Sheets). Mocht je er nog niet van gehoord of over gelezen hebben dan is het wellicht handig om daarmee te beginnen. Als je het H1 element dezelfde grootte wil geven als de standaardtekst, volstaat de volgende declaratie:
h1{
font-size:1em;
}
Wellicht wil je de koptekst in een schreeflettertype (serif) weergeven:
h1{
font-size:1em;
font-family:Georgia,serif;
}
De conclusie is dat semantische markup nodig is om Google en andere zoekmachines een beter idee te geven van de website. Ook biedt het andere voordelen, zoals een verbeterde toegankelijkheid voor minder validen en bovendien kleinere bestanden.
Op naar een beter web, op naar een betere wereld!