Mijn-eigen-website.nl

Websitebouw voor doe-het-zelvers

Hoe kun je je website controleren op foutjes?

Met een validator check je zowel de html- als de css-code van je pagina’s.

Een website bouwen komt heel precies. Je hoeft maar een enkel teken vergeten te zijn of het op de verkeerde plaats neer te zetten, en je pagina ziet er al niet meer uit zoals je bedoeling was. Daarom is het altijd verstandig je pagina’s even te laten controleren door een zogenaamde validator voordat je ze online zet.

Een website validator is een programmaatje dat je code naloopt en kijkt of alles in orde is. Vindt hij foutjes, dan geeft hij precies aan op welke plaats ze staan, zodat je ze gemakkelijk kunt opsporen en rechtzetten.

w3c validator check

Zelf maak ik altijd gebruik van de W3C-validator, de website check van het World Wide Web consortium. Die biedt drie manieren om je website te controleren op fouten: je kunt een website-adres invoeren (validate by uri), een html-bestand uploaden (validate by file upload), of je html-code direct invoeren in een speciaal daarvoor bedoeld vak (validate by direct input). Dus ook vóórdat je je pagina’s online zet, kun je even controleren of alles in orde is.

De validate by direct input-methode vind ik het gemakkelijkste. Het programma is namelijk erg secuur, en vindt ook fouten in stukjes code waar je niets aan kunt veranderen. Heb je bijvoorbeeld een Facebook like-button op je pagina staan, dan geeft de code daarvoor eigenlijk altijd een foutmelding. Omdat je verder niets aan die code kunt veranderen, haal ik meestal alle coderingen weg die niet van mezelf zijn, en plak ik wat overblijft in het daarvoor bestemde vakje bij de validate by direct input-methode.

Toen ik dat bij deze pagina deed en op de check-button had geklikt, kreeg ik het volgende te zien:

uitkomst w3c validator check

Ik had dus twee waarschuwingen, en er bleek één fout in mijn pagina te zitten. De eerste waarschuwing had te maken met het feit dat deze pagina in html5 is geschreven. De html5 checker van de validator is nog in een experimenteel stadium, dus met deze waarschuwing houden ze nog even een slag om de arm.

De tweede waarschuwing is ook niet ernstig: omdat ik de validate by direct input-methode heb gebruikt, wordt de code die ik in het invoervak plak, omgezet in de karakterset utf-8. Dat is in dit geval prima, want mijn pagina was ook in utf-8 opgeslagen. (In het artikel ‘Hoe codeer je speciale tekens in html’ lees je meer over karaktersets.)

fout w3c validator check

Maar behalve deze twee waarschuwingen had ik dus ook een foutmelding, en het betrof een fout die ik zelf helemaal over het hoofd had gezien. Er bleek één afsluitende div-tag te veel op de pagina te staan. Ondanks dat foutje zag mijn pagina er nog wel goed uit in de verschillende browsers, omdat het de allerlaatste tag was die ik op de pagina had gezet (afgezien van de afsluitende tags voor het body- en het html-element dan).

De validator vertelt je ook waar je fouten precies te vinden zijn; in mijn geval stond er dus een fout op regel 142. Als je de bewuste plek niet direct kunt vinden, plak je de code die je in het invoervak van de validator had geplakt precies zo in een leeg document in je html-editor. Dan zoek je de genoemde regel op, en zie je vanzelf wel welke correctie je moet doorvoeren. Toen ik dit foutje had gecorrigeerd, en de code opnieuw liet controleren, kreeg ik dit te zien:

validator ok

Schrik trouwens niet als je heel veel foutmeldingen krijgt; ze zijn lang niet allemaal even ernstig. En het wil ook niet direct zeggen dat je website er niet goed uit zou zien in de verschillende browsers. Maar is dat niet het geval, en kun je niet vinden waar het probleem zit, dan is deze validator een makkelijke manier om de pagina’s van je website te controleren en de ‘boosdoener’ te achterhalen.

Behalve je webpagina’s kun je ook je stylesheet(s) laten controleren. Daarvoor biedt het World Wide Web consortium een CSS Validation Service aan. Het principe is hetzelfde: je kunt weer op drie manieren je stylesheet invoeren (via uri, uploaden van bestand, of directe invoer). Toen ik mijn eigen stylesheet invoerde, kreeg ik de volgende melding:

css validator service

Deze melding wijst me erop dat ik voor een downloadbutton die ik heb gemaakt, dezelfde kleuren heb opgegeven voor zowel achtergrondkleur als randkleur (die randkleur zou ik dus net zo goed weg kunnen laten). Nou zal niemand iets merken van die overtollige aanduiding, dus ik laat het erbij, maar op deze manier zou je dus ook ernstiger fouten in je stylesheet aan het licht kunnen brengen.