# Opbouw van een webpagina
# Verplichte bouwstenen
Elke webpagina moet voldoen aan een aantal basisvoorwaarden om een geldige webpagina te zijn. Er zijn vier verplichte elementen die de basisstructuur van een webpagina vormen.
- Het Document Type
- Een html-sectie
- Een head-sectie
- Een body-sectie
Men noemt dit ook het skelet van een HTML-document.
# Document Type
Het Document Type (doctype) laat aan de browser weten welke versie van HTML gebruikt wordt in de code. Tegenwoordig is er geen reden om niet de nieuwste versie van HTML te gebruiken, waardoor de gestandardiseerde schrijfwijze voor het doctype de volgende is:
<!DOCTYPE html>
Deze regel moet de eerste regel van de HTML-pagina zijn. Let ook op het gebruik van het uitroepteken en de hoofdletters voor het element!
# html-sectie
Het element <html> duidt op de start van de HTML-code. Het volgt op de declaratie van het doctype. Het representeert de 'root' (het element op het hoogste niveau) van een HTML-document. Alle andere elementen moeten nakomelingen zijn van dit element. Je kan ook de taal van de website opnemen binnen het <html> element met het attribuut lang (voor Nederlandstalige pagina's).
# head-sectie
De head-sectie van een HTML-pagina geeft extra informatie aan de browser over de interpretatie of weergave van de pagina. Het gaat meestal om informatie van technische aard, zoals het gebruikte karakterset, regels voor het inzoomen van de pagina op mobiele apparaten, informatie voor zoekmachines, enz...
Om de head-sectie te beschrijven gebruik je het <head> element. Dit element is het eerste kindelement van het <html> element.
<!DOCTYPE html>
<html lang="nl-BE">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titel van de pagina</title>
</head>
</html>
In het bovenstaande voorbeeld wordt het element <title> gebruikt om de titel van de webpagina aan te passen. De gebruiker ziet deze titel bovenaan het browservenster of als titel van het huidige tabblad. Het <title> element mag enkel in de head-sectie gebruikt worden en is verplicht!
De <meta> elementen geven de browser verdere info, afhankelijk van het name attribuut dat gebruikt wordt. Ze zijn niet verplicht, maar de volgende twee worden wel aangeraden voor elke pagina:
<meta charset="utf-8"> zegt aan de browser het UTF-8 karakterset te gebruiken voor het weergeven van de tekst. Hierdoor worden tekens zoals het copyrightteken © en euroteken € correct weergegeven.
<meta name="viewport" content="width=device-width, initial-scale=1"> optimaliseert de weergave van de pagina op mobiele apparaten. In de meeste gevallen is deze standaardregel voldoende en hoef je de details nog niet te weten.
Andere elementen die binnen de head-sectie gebruikt kunnen worden komen in latere hoofdstukken aan bod.
# body-sectie
De inhoud van de webpagina komt terecht in de body-sectie. Hiervoor gebruik je het <body> element. Het volgt op de head-sectie.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titel van de pagina</title>
</head>
<body>
<h1>Volledig skelet van een webpagina</h1>
<p>Voorzie elk verplicht element om een geldige webpagina af te leveren aan de browser!</p>
</body>
</html>
Om tijd te sparen kan je het bovenstaande skelet opslaan als sjabloon voor hergebruik of gebruikmaken van een geavanceerde teksteditor (zoals Visual Studio Code of Atom) om het skelet automatisch te genereren.
# Valideren van een webpagina
Het W3C biedt een online validator aan om je HTML-code te testen tegen de huidige webstandaard. Je kan op drie manieren je code laten valideren:
- Langs een URL, indien je website al online staat.
- Door een HTML-document te uploaden.
- Door rechtstreeks je code in een tekstvak te plakken.
Probeer bijvoorbeeld het basisskelet te valideren via de rechtstreeks input!
