HTML-structuur: de bouwstenen
Begrijp de basisstructuur van een HTML-document.
HTML-structuur: de bouwstenen is een gratis HTML for Kids-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML for Kids. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML for Kids bevat in totaal 4 lessen.
HTML-structuur: de bouwstenen
Welkom bij de tweede les! Vandaag leer je meer over de structuur van een HTML-document en hoe de onderdelen ervan in elkaar passen. Zie dit als het leren kennen van het skelet van een webpagina.
De structuur van een HTML-document
Een HTML-document heeft een specifieke structuur die de browser begrijpt. Het is als een recept dat de browser vertelt wat hij moet doen.
De basisonderdelen van een HTML-document zijn:
- Doctype-declaratie: Vertelt de browser dat dit een HTML-document is.
- HTML-tag: Bevat alle inhoud van de pagina.
- Head: Bevat informatie over de pagina, zoals de titel.
- Body: Bevat de inhoud die zichtbaar is voor de gebruiker.
Hoe ziet de structuur eruit?
Zo ziet de structuur van een eenvoudig HTML-document eruit:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is the content of my web page.</p>
</body>
</html>
De doctype-declaratie
De declaratie <!DOCTYPE html> staat bovenaan elk HTML-document. Deze vertelt de browser dat hij HTML5 moet verwachten, de nieuwste versie van HTML.
Zie het als het beginpunt van je HTML-recept!
De HTML-tag
De tag <html> is de hoofdcontainer voor alle code in je document. Deze vertelt de browser: “Alles hierin is HTML.”
Zo ziet die eruit:
<html>
<!-- All other HTML tags go here -->
</html>
De head-sectie
De sectie <head> bevat informatie over je webpagina die niet op de pagina zelf zichtbaar is. Bijvoorbeeld:
- Titel: De tekst die op het browsertabblad wordt weergegeven.
- Metagegevens: Extra details, zoals de beschrijving van de pagina.
Voorbeeld:
<head>
<title>My Cool Web Page</title>
</head>
De body-sectie
De sectie <body> bevat alles wat zichtbaar is voor de gebruiker, zoals tekst, afbeeldingen en koppelingen. Dit is het belangrijkste inhoudsgebied.
Voorbeeld:
<body>
<h1>Welcome!</h1>
<p>This is my awesome web page.</p>
</body>
Alles samenvoegen
Hier is een volledig voorbeeld van een HTML-document met alle onderdelen die we zojuist hebben geleerd:
<!DOCTYPE html>
<html>
<head>
<title>All About Me</title>
</head>
<body>
<h1>Hi, I’m a Web Creator!</h1>
<p>This is my first structured HTML page.</p>
</body>
</html>
Goed gedaan!
Gefeliciteerd! Je hebt de structuur van een HTML-document geleerd. Nu weet je hoe alle onderdelen in elkaar passen om een webpagina te maken. In de volgende les begin je echte inhoud aan je pagina's toe te voegen. Maak je klaar om je eerste webmeesterwerk te bouwen!
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 16
- Lessen
- 35
Veelgestelde vragen
Is de les “HTML-structuur: de bouwstenen” gratis?
Ja — de volledige tekst van “HTML-structuur: de bouwstenen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus HTML for Kids wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus HTML for Kids bevat in totaal 4 lessen.
Wat leer ik in “HTML-structuur: de bouwstenen”?
Begrijp de basisstructuur van een HTML-document. Je oefent met HTML for Kids door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met HTML for Kids te beginnen?
Ervaring vooraf is niet nodig. HTML for Kids op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “HTML-structuur: de bouwstenen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over HTML for Kids?
Ja. Elke les over HTML for Kids bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Wat is HTML?
- HTML-structuur: de bouwstenen
- HTML-tags en -elementen
- Uw eerste HTML-pagina instellen