HTML5 en CSS3 valideren HTML5+CSS3

Verschillende browsers laten dezelfde webpagina soms verschillend zien. Op school kan je dat testen met de Microsoft Internet Explorer, Google Chrome en Firefox. Indien er verschillen zijn betekent dat niet dat de ene browser beter is dan de andere, maar dat de webpagina zich niet aan de standaarden houdt. In de HTML5 webdesign cursus leer je de meest recente standaarden: HTML5 en CSS3. Het grote voordeel van webpagina's die voldoen aan de HTML5 en CSS3 standaarden is, dat ze er met alle browsers hetzelfde uitzien.

Indien een webpagina niet voldoet aan HTML5 en CSS3 probeert elke browser er iets van te maken, zelfs als je fouten hebt gemaakt op je webpagina! Maar zo ontstaan wel verschillen tussen de browsers.

Gelukkig kan je eenvoudig controleren of je webpagina voldoet aan de HTML5 en CSS3. Daarvoor bestaan namelijk een validator voor HTML5 en een validator voor CSS3. Met zo'n validator controleer je je webpagina en vervolgens kan je je webpagina verbeteren en nogmaals controleren. Ga daar in ieder geval mee door tot je alle errors hebt verbeterd, want dan voldoet je webpagina aan de standaarden. En als je helemaal gaat voor topkwaliteit van je webpagina ga je door tot je ook alle warnings kwijt bent. Valideren is dus een kwaliteitscontrole.

HTML5 valideren

De eerste pagina van deze website was eerst ook fout. De validator gaf toen de volgende fouten:

Error 1 was niet zo duidelijk. Daarom moest ik die foutboodschap opzoeken met Google Uit de antwoorden bleek dat het belangrijk is om aan de browser te vertellen dat op deze webpagina geen Chinees, Arabisch of Grieks staat, maar iets wat is geschreven met "ons" schrift: utf-8. Dit is meta informatie voor de browser. Hieronder staat de code van een minimale HTML5-webpagina met een seperaat CSS3-bestand in een submap.


<!doctype html>
<html lang="nl">
  <head>
    <meta charset="utf-8">
    <title>Informatica van Peter van Diepen</title>
    <link rel="stylesheet" type="text/css" href="css/informatica.css">
  </head>
  <body>
    
  </body>
</html>
  

Error 4 snapte ik meteen. Ik had <tr> en daarna geen afsluitende </tr>, maar wel een volgende <tr>.

Warning 2, 3, 5 en 6 waren ook duidelijk. Ik had iets voor de opmaak van tabellen tussen de HTML gezet. Dat werkte wel, maar in principe hoort opmaak in de CSS. Ook dit moest ik even opzoeken met Google. Toen kon ik <table border="1"> vervangen door <table> in de HTML. En na wat experimenten kon, schreef ik de volgende CSS-regels.

 
table {
  border-collapse: collapse; 
}

 table, th, td {
     border: 1px solid black;
}  
  

Daarna had ik de eerste pagina van deze website opnieuw gevalideerd met de validator HTML5.

CSS3 valideren

Deze website gebruikt een separaat CSS-bestand. Dat bestand is gecontroleerd met de validator voor CSS3.