Wat is HTML?

Wat is HTML?

HTML staat voor HyperText Markup Language. Het is geen programmeertaal — het is een opmaaktaal. Dat onderscheid is belangrijk: HTML berekent niets en neemt geen beslissingen, het beschrijft alleen de structuur van een pagina. Denk aan HTML als het skelet van een gebouw: het bepaalt waar de muren, deuren en kamers komen, maar niet de verf of de meubels. Die komen later, met CSS (opmaak) en JavaScript (gedrag).

Elke website die je ooit bezocht hebt, is opgebouwd uit HTML. Wanneer je browser een pagina laadt, leest hij het HTML-bestand van boven naar beneden en bouwt hij daar een boomstructuur van, de zogeheten DOM (Document Object Model). Die boom bepaalt wat je op het scherm ziet en in welke volgorde.

Waarom is dit relevant voor een MKB-website?

Stel je bent zzp'er of eigenaar van een klein bedrijf en je laat een website bouwen — misschien voor een webshop, een portfolio of een boekhoudkundig dienstverlening. Ook al besteed je het bouwwerk uit aan een bureau of gebruik je een platform zoals WordPress of Shopify, onder de motorkap wordt altijd HTML gegenereerd. Als je begrijpt hoe HTML werkt, kun je:

• Beter meepraten met een webbouwer over structuur en toegankelijkheid.
• Kleine teksten of links zelf aanpassen zonder een heel CMS-paneel nodig te hebben.
• Begrijpen waarom sommige dingen (zoals een KVK-nummer in de footer of een AVG-cookiemelding) technisch als aparte structuurelementen worden ingericht.

Tags: de bouwstenen van HTML

HTML bestaat uit tags. Een tag is een instructie tussen punthaken, zoals <p> voor een paragraaf. De meeste tags komen in paren: een openingstag en een sluitingstag met een schuine streep.

<p>Dit is een paragraaf tekst.</p>
<strong>Dit is vetgedrukte tekst.</strong>
<em>Dit is cursieve tekst.</em>

Sommige tags hebben geen sluitingstag omdat ze geen inhoud bevatten, zoals de regelafbreking <br> of een afbeelding-tag. Die worden ook wel "self-closing" tags genoemd.

Tags kunnen ook attributen hebben: extra informatie binnen de openingstag. Een link (<a>) heeft bijvoorbeeld een href-attribuut dat aangeeft waar de link naartoe gaat:

<a href="https://www.kvk.nl">Bezoek de KVK</a>

De basisstructuur van een HTML-document

Elk HTML-bestand begint met een aantal verplichte onderdelen. Dit is het minimale skelet:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Mijn eerste pagina</title>
</head>
<body>
    <p>Hallo wereld!</p>
</body>
</html>

Laten we dit stap voor stap ontleden:

• <!DOCTYPE html> vertelt de browser dat dit een modern HTML5-document is. Zonder deze regel kan de browser terugvallen op een verouderde weergavemodus, met vervelende bijeffecten voor lay-out.
• <html lang="nl"> is het buitenste element dat alles omvat. Het lang-attribuut vertelt browsers en schermlezers dat de inhoud Nederlands is — belangrijk voor toegankelijkheid en voor correcte uitspraak door voorleessoftware.
• <head> bevat metadata: informatie over de pagina, niet de zichtbare inhoud zelf. Denk aan de paginatitel, tekencodering en later ook koppelingen naar CSS-bestanden.
• <meta charset="UTF-8"> zorgt ervoor dat speciale tekens zoals €, ë en ç correct worden weergegeven. Dit voorkomt de bekende "rare vraagtekens" op een pagina.
• <title> bepaalt de tekst in het browsertabblad en is ook wat Google toont als klikbare titel in zoekresultaten — dus relevant voor SEO.
• <body> bevat alles wat de bezoeker daadwerkelijk ziet: teksten, knoppen, formulieren, afbeeldingen.

Geneste elementen

HTML-elementen kunnen in elkaar genest worden, zolang je de volgorde van openen en sluiten netjes aanhoudt. Dit werkt goed:

<p>Onze webshop werkt met <strong>iDEAL</strong> en <strong>creditcard</strong>.</p>

Dit werkt niet — de tags overlappen elkaar in plaats van netjes genest te zijn:

<p>Onze webshop werkt met <strong>iDEAL</p></strong>

Browsers proberen fouten als deze vaak stilzwijgend te herstellen, maar dat gedrag is onvoorspelbaar en verschilt per browser. Netjes nesten is dus geen stijlkeuze, maar een technische noodzaak.

Commentaar in HTML

Soms wil je een notitie in je code zetten die niet zichtbaar is voor bezoekers — bijvoorbeeld om een collega uit te leggen waarom een blok er zo uitziet. Dat doe je met een HTML-comment:

<!-- Dit blok toont de openingstijden, alleen aanpassen via het CMS -->

Comments worden door de browser genegeerd, maar zijn wel gewoon zichtbaar als iemand de broncode van je pagina bekijkt (via "Paginabron weergeven"). Zet er dus nooit gevoelige informatie in, zoals API-sleutels of wachtwoorden.

Hoe browsers omgaan met fouten

Een eigenschap van HTML die nieuwe ontwikkelaars vaak verrast: browsers zijn extreem vergevingsgezind. Vergeet je een sluitingstag of maak je een tikfout in een attribuut, dan crasht de pagina niet zoals bij een programmeertaal — de browser doet gewoon een gok over wat je bedoelde en toont zo goed mogelijk een resultaat. Dat klinkt prettig, maar heeft een keerzijde: kleine fouten blijven vaak onopgemerkt totdat de pagina in een andere browser net anders wordt weergegeven, of totdat je later een stuk code toevoegt dat wel op de exacte structuur rekent. Daarom is het een goede gewoonte om vanaf het begin netjes te werken, ook al "werkt" slordige code toevallig net zo goed in jouw browser van dat moment.

Tekens die je moet ontwijken

Omdat de tekens < en > een speciale betekenis hebben in HTML (ze markeren het begin en einde van een tag), kun je ze niet zomaar letterlijk in je tekst typen. Wil je bijvoorbeeld de tekst "5 < 10" tonen, dan gebruik je een zogeheten entity:

&lt; staat voor het teken <
&gt; staat voor het teken >
&amp; staat voor het teken &

Dit lijkt een detail, maar komt in de praktijk sneller voor dan je denkt — bijvoorbeeld wanneer je op een pagina een voorbeeld van code wilt tonen, of een prijsvergelijking wilt schrijven zoals "< €50".

Samenvatting

HTML is de structuurtaal van het web. Het bestaat uit tags die tekst en andere elementen omkaderen, meestal in paren van open- en sluitingstag. Een HTML-document heeft een vaste basisstructuur met <html>, <head> en <body>. In de volgende les bouw je je eerste volledige HTML-pagina van begin tot eind.