De waarde van semantisch correcte html in de praktijk

Bij Flyers Internet Communicatie zijn we goed op de hoogte zijn van webstandaarden. Met name op het gebied van correct gebruik van html om de semantische waarde van de content te verbeteren moet je daarom soms met creatieve oplossingen komen.

Stel: Je wilt een teamfoto op een website tonen, waarbij de hoofden van de teamleden doorklikbaar zijn naar een detailpagina. Waar we enige jaren geleden nog uitgingen van het visuele eindresultaat van ons werk, houden we tegenwoordig bijvoorbeeld ook rekening met blinde bezoekers (zoals Google!). Dit betekent dat we uitgaan van de betekenis van onze inhoud, en niet van hoe dit eruit moet komen te zien.

HTML is de taal waarin webpagina’s worden opgebouwd. Deze taal bepaald de structuur van een pagina. Het biedt een houvast voor browsers, zoekmachines en screenreaders om te bepalen wat voor soort inhoud erin besloten ligt. Door inhoud te ordenen met de juiste HTML vergroten we de mogelijkheden van deze software de structuur en (deels) de betekenis van de pagina-inhoud te doorgronden. We noemen dit ‘semantisch correcte html’ omdat dit gerelateerd is aan semantiek: De wetenschap die zich bezighoudt met de betekenis van taalconstructies.

Qua inhoud is de teamfoto eigenlijk een lijst met namen van teamleden. Dit verwerken we normaal gesproken in de HTML-code als een lijst. Dat ziet er als volgt uit:

<ul>
<li><a href=”jan.htm”>Jan</a></li>
<li><a href=”Pieter.htm”>Pieter</a></li>
</ul>
etc.

Deze lijst wordt later via CSS zo weergegeven dat de namen onzichtbaar zijn, en de link precies het gebied van het hoofd van de betreffende medewerker beslaat, zodat deze, net als in de oude versie, aanklikbaar is. Het voordeel van deze methode is:

1. Google ziet een lijst met namen, in plaats van onbestemde links. Aan de hand hiervan worden zoekresultaten op deze trefwoorden beter van kwaliteit.
2. Mocht een slechtziende bezoeker, gebruikmakend van een screenreader de site bezoeken, dan zal deze, in plaats van links zonder inhoud, netjes een lijst van namen te horen krijgen. Vervolgens kan ook deze bezoeker verder navigeren op de site.

Dit is de eerste in een serie posts over de voordelen van correct gebruik van HTML op het gebied van toegankelijkheid en zoekmachine-optimalisatie.

Geschreven door Joost van der Borg in de categorie: Webcontent, Webdesign