Vroeger was het makkelijker

Donderdag 13 December 2007 02:42 Laatste aanpassing (Dinsdag 15 Juli 2008 11:24)

Van alles en meer

Heel heel vroeger (ver voor mijn tijd) was het leven makkelijk voor een webdesigner: met wat font tags maakte je je tekst op en als je hoog in de zoekmachines wilde komen te staan, dat deed je wat witte letters op een witte achtergrond met de juiste woorden en dat was het.

Toen kwamen de web standards en het scheiden van inhoud en presentatie, de opmaak in een css stylesheet, en de content als pure html. Dat was vorig jaar.

Maar nu! Nu heb ik het pas echt moeilijk.

Want ik wil mijn eigen site graag laten voldoen aan de webrichtlijnen van de Nederlandse Overheid. Ja ze zitten me hoog. Ik wil ze goed onder de knie krijgen, want ze brengen veel goeds met zich mee. Mijn site voldoet overigens niet aan al die richtlijnen. Maar ik ben op de goede weg.

Dingen waar ik me nu mee bezig houd als ik mijn website bijhoud (zoals nu, op dit moment), zijn:

• geeft de webrichtlijnentoets wel de maximale score als ik deze pagina door de tool haal (ik bedoel http://webrichtlijnen.overheid.nl/toetsen/). Dit toets-tool voert o.a. de W3C HTML validatie uit, en ook de CSS-validatie. Maar doet nog veel meer. Het toetst 47 van de 125 webrichtlijnen automatisch. Ik wil graag dat die allemaal in ieder geval in orde zijn.
• heb ik wel in het tweede gedeelte van elk artikel (dat je te zien krijgt als je op "lees meer..." klikt) een <h2>-header ingevoegd, want als ik dat niet doe, dan klopt de semantische structuur niet meer, omdat ik in mijn site de rechterkolom, die in de source code na de middenkolom komt, allemaal <h3>-headers gebruik.

Wat zegt u? Ja ja. Als ik geen <h2> gebruik in het 'lees meer...' gedeelte dan ga ik de fout in. Want als je dan de html bekijkt (via 'view source' in je browser) dan is de eerstvolgende header na de <h1> een <h3> (in de rechterkolom). En dat is geen correcte semantische structuur, want dat vereist dat je een <h1> onderverdeelt in <h2>'s (minstens één). En die mag je weer onderverdelen in <h3>-headers. Etc.

Fout

Bovenstaande header ("Fout") is noodzakelijk om aan de webrichtlijnen te voldoen. Ik moet ergens in dit gedeelte van de tekst een <h2> tag plaatsen want anders 'gaat het fout'.

Nog een header

Ik mag gerust nog een <h2> plaatsen. Maar als ik hier nu een <h4> zou plaatsen, dan zou de site niet meer valideren volgens http://webrichtlijnen.overheid.nl/toetsen/.

Ik heb het even geprobeerd. Ik heb zojuist hier, op deze plek, een <h4> geplaatst. Het toetstool komt met de volgende meldingen:

• Deze pagina lijkt grammaticaal correcte markup te bevatten, maar bevat een ongeldige kopregelhiërarchie. Dit duidt vaak op het gebruik van kopregelniveaus om hun grootte in plaats van hun structurele functie.
• In de kopregelhiërarchie lijkt een niveau te zijn overgeslagen (bijvoorbeeld van h1 naar h3 zonder een h2. Dit duidt vaak op het gebruik van kopregelniveaus om hun grootte in plaats van hun structurele functie.

Je ziet trouwens dat in de tweede foutmelding een haakje mist! Kijk, dat is nou jammer.

Ik heb trouwens een blockquote gebruikt. Dat is ook een speciale afdeling van de webrichtlijnen: het gebruik van cite, blockquote, ect. Lees eventueel wat de webrichtlijnen er over zeggen.

Er is geen enkel mechanisme in mijn content management systeem dat me waarschuwt als het niet goed gaat. Dus ik zal zelf goed moeten opletten. De beloning is dat Google je site beter waardeert. Google houdt van headers, zeker als ze zo op correcte wijze gebruikt worden. Ik kan hier echter niet uitleggen waarom het nu precies een webrichtlijn is. Want ik weet niet waarom een site minder toegankelijk zou zijn als de semantiek niet klopt. Daar hoop ik nog achter te komen.