Webpagina’s worden opgebouwd met behulp van HTML‑tags. Een webbrowser (bv. Microsoft Edge, Mozilla Firefox, Google Chrome ...) kan deze tags lezen en omzetten naar de weergave die bedoeld is voor de bezoekers van jouw website. Zij krijgen geen code te zien, maar wel een opgemaakte pagina.
Tip: een browser geeft ons altijd de mogelijkheid om de broncode te bekijken. Bijvoorbeeld door met je rechtermuisknop op de webpagina te klikken en vervolgens "bron weergeven" of "paginabron bekijken" te kiezen in het snelmenu.
De basisstructuur van een HTML5 webpagina wordt als volgt opgebouwd:
Opmerking: bij de codeweergave staat meestal een nummering, dit is enkel voor het overzicht en hoort niet bij de code.
1 Het doctype
Om te beginnen moet je aangeven welk documenttype (doctype) gebruikt zal worden. Dit stukje code staat helemaal bovenaan elke HTML-pagina en bevat belangrijke informatie voor de webbrowser die de pagina moet lezen/interpreteren. De browser weet aan de hand van het doctype welke tags er allemaal kunnen en mogen volgen in je broncode.
Bij HTML5 is het aanduiden van het doctype zeer eenvoudig:
<!doctype html>Bij het ouder HTML 4.01 Transitional doctype zag de code er zo uit:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">We kunnen besluiten dat het doctype ervoor zorgt dat onze webpagina optimaal wordt weergegeven. Zo zijn sommige tags die gebruikt worden bij HTML5 bijvoorbeeld niet beschikbaar bij HTML 4.01 en sommige tags uit de oudere HTML versies worden in de nieuwe versie niet langer gebruikt. Door middel van het doctype weet een webbrowser wat te verwachten.
2 HTML-tag
Deze tag geeft het begin en einde van de HTML-code aan.
Merk op dat tags altijd tussen twee haakjes worden geplaatst. Tags komen in de meeste gevallen per twee voor (openings- en sluittag/begin- en eindtag). Bij het afsluiten plaatst men naast de haakjes ook nog een schuine streep/slash voor de tag.
<!DOCTYPE html>
<html>
</html>3 HEAD-tag en TITEL-tag
De head-tag geeft het begin en einde van de hoofding van de pagina aan. Hetgeen binnen de head-tags staat, wordt niet weergegeven op de pagina, met uitzondering van de titel die zal worden weergegeven in de titelbalk van je webbrowser. Head staat altijd tussen de HTML-tags en voor de BODY-tag.
<!doctype html>
<html>
<head>
<title>Paginatitel</title>
</head>
</html>4 BODY-tag
Komt na de HEAD-tag en geeft het begin en einde van de inhoud van de pagina aan. Deze tag bevindt zich ook altijd tussen de HTML-tags.
Hieronder vind je de volledige code met alle basiselementen.
<!doctype html>
<html>
<head>
<title>Paginatitel</title>
</head>
<body>
Inhoud pagina
</body>
</html>Opmerking: het is niet verplicht om alle tags onder elkaar te noteren. De code zou je ook allemaal na elkaar mogen typen, maar dan heb je minder overzicht. Zeker wanneer je later nog meer code toevoegt.
<!doctype html><html><head><title>Paginatitel</title></head><body>Inhoud pagina</body></html>Tip: aangezien bovenstaande tags telkens opnieuw gebruikt worden, kan je de basisstructuur van een HTML-pagina opslaan als een sjabloon: plak of typ de code in kladblok of een HTML-editor en sla het bestand op als sjabloon.html. Zo heb je steeds de basis voor een nieuwe pagina bij de hand.
Download: sjabloon (.zip)