HTML code valideren

Home

HTML code valideren

Een goede HTML code genereren is vaak minder makkelijk dan je op het eerste gezicht denk. Code valideren is daarom een goede zaak. Wil je weten hoe je dit moet doen, lees dan vooral verder.

Wanneer je test of alle functies op je website werken, kom je wel eens tot de vaststelling dat je een HTML-code verkeerd hebt ingetypt, een tag bent vergeten af te sluiten enzovoort. Zeker als je serieus wilt genomen worden met je website, is het van een groot belang dat je broncode foutloos is.

Het proces van controleren of een webpagina geldig (valid) is opgesteld, noemen we valideren. We kunnen handmatig onze broncode gaan controleren op dergelijke fouten, maar het is menselijk dat we over een aantal fouten heen zullen kijken.

Hiervoor heeft het W3C de markup validator ontworpen. Het W3C is de organisatie die de standaarden inzake HTML (en nog een heleboel andere webtalen) vastlegt.

De webvalidator vind je op http://validator.w3.org.

Voorwaarden

Belangrijk om te weten is dat je HTML-document aan 2 voorwaarden moet voldoen om gevalideerd te kunnen worden door de markup validator:

Welke versie van (X)HTML je gebruikt moet terug te vinden zijn helemaal bovenaan je document. Dit is de zogenaamde doctype van je document.
In de broncode van je webpagina moet ook terug te vinden zijn welke tekenset je gebruikt. Die kan immers verschillen van land tot land.

Een valideerbaar document ziet er bijvoorbeeld zo uit:

Foutloze code schrijven is erg belangrijk bij het maken van een website. Het komt enkel je <b>professionaliteit ten goede.
In dit voorbeelddocument zijn expres enkele fouten gemaakt zodat we straks de markup validator in actie kunnen zien.

Je bestand aanbieden

Op de webpagina die dan verschijnt, kun je kiezen tussen 3 mogelijkheden:

Validate by URL: Je kunt hier het internetadres intypen van de pagina die je wilt valideren. De pagina die je controleert, moet dus al online beschikbaar zijn (deze mogelijkheid is vooral bruikbaar bij dynamisch gegenereerde pagina's).

Validate by File Upload: Webpagina's die opgeslagen zijn op je pc kun je hier selecteren en laten controleren.

Validate by Direct Input: De volledige broncode van je HTML-document kun je in dit tekstgebied invoeren en laten controleren. Let op dat je de volledige code hier invoert en niet enkel wat tussen <body> en </body> staat.

Kopieer de code en plak ze in het tekstgebied bij Validate by Direct Input. Druk op de knop Check.

De validatieresultaten

De validator meldt ons dat er 7 fouten zijn gevonden.

7 fouten gevonden

In een rode kader krijgen we te zien dat onze pagina niet valid is. Daaronder staat een lijst opgesomd met de fouten die gevonden zijn in dit document:

end tag for element "H3" which is not open:

Er is een eindtag gevonden voor <h3> terwijl er geen beginnende <h3>-tag is gevonden. We zijn immers gestart met <h2>.
document type does not allow element "HEAD" here:

In de body van een webpagina kun je niet de tags <head> gebruiken. Als je deze gewoon wilt afdrukken zoals bij ons de bedoeling is, zul je < en > moeten omzetten naar de hexadecimale code.
end tag for element "P" which is not open:

Er is een eindtag gevonden voor <p> terwijl er geen beginnende <p>-tag is gevonden.
end tag for "B" omitted, but its declaration does not permit this:

Er is een eindtag gevonden voor <b> terwijl er geen beginnende <b>-tag is gevonden.

Fouten corrigeren

We gaan nu deze fouten corrigeren. Hieronder vind je in het vet aangeduid onze correcties.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Valideerbare pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<h2>Inleiding</h2>
Foutloze code schrijven is erg belangrijk bij het maken van een website. Het komt enkel je <b>professionaliteit</b> ten goede.
In dit voorbeelddocument zijn expres enkele fouten gemaakt zodat we straks de markup validator in actie kunnen zien.
<p>Merk ook op dat dit document begint met een doctype die de validator vertelt welke versie van HTML we gebruiken. Tussen de tags <head> en </head> vinden we ook de gebruikte tekenset terug.</p>
</body>
</html>