Wat is HTML? De bouwstenen van een webpagina
HTML, voluit HyperText Markup Language, is de taal die de structuur van elke webpagina beschrijft. De browser leest je HTML-bestand en zet het om naar wat je op het scherm ziet. Zonder HTML bestaat er geen webpagina.
HTML werkt met elementen. Een element bestaat uit een openingstag, inhoud en een sluitingstag:
<p>Dit is een alinea.</p>
De openingstag is <p>, de sluitingstag is </p> (let op de schuine streep). Alles daartussen is de inhoud. Sommige elementen hebben geen inhoud en geen sluitingstag, zoals <img /> en <br />.
HTML-document structuur
Elk HTML-bestand volgt dezelfde basisstructuur. Dit is het minimale skelet van elke webpagina:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>Mijn eerste pagina</title>
</head>
<body>
<h1>Welkom!</h1>
<p>Dit is mijn eerste webpagina.</p>
</body>
</html>
Elk onderdeel heeft een vaste taak:
<!DOCTYPE html>vertelt de browser dat dit een modern HTML5-document is.<html lang="nl">is het buitenste element dat alles omsluit. Het attribuutlang="nl"zegt dat de pagina in het Nederlands is.<head>bevat informatie over de pagina die niet zichtbaar is op het scherm, zoals de titel en de tekenset.<meta charset="UTF-8" />zorgt dat speciale tekens (zoals é, ü en ij) goed worden weergegeven.<title>is de tekst die je ziet op het browsertabblad.<body>bevat alles wat de bezoeker op het scherm ziet.
Gebruik inspringen (inspringing met spaties of tabs) om te laten zien welke elementen binnen andere elementen staan. De browser negeert witruimte, maar jij en je collega's lezen de code veel makkelijker.
De belangrijkste HTML-elementen
Koppen
Koppen structureren je pagina van groot naar klein. <h1> is de hoofdkop, <h6> de kleinste.
<h1>Dit is de hoofdkop van de pagina</h1>
<h2>Dit is een tussenkop</h2>
<h3>Dit is een subkop</h3>
Gebruik per pagina maar één <h1>. Dat is goed voor zoekmachines en de leesbaarheid.
Alinea's
Gebruik <p> voor gewone tekst:
<p>
HTML is de basis van elke website. Zonder HTML kun je geen webpagina bouwen.
</p>
<p>
Dit is een tweede alinea. De browser zorgt automatisch voor ruimte tussen
alinea's.
</p>
Links
Met <a> maak je klikbare links. Het attribuut href geeft aan waarnaar de link verwijst:
<a href="https://developer.mozilla.org">Ga naar MDN</a>
<a href="over-ons.html">Over ons</a>
De eerste link gaat naar een externe website. De tweede link gaat naar een andere pagina op je eigen website.
Afbeeldingen
Met <img /> voeg je een afbeelding toe. Het element heeft geen sluitingstag. Het attribuut src geeft het pad naar de afbeelding en alt een tekstbeschrijving:
<img src="foto.jpg" alt="Een foto van het strand bij zonsondergang" />
Het alt-attribuut is verplicht. Schermlezers voor blinde bezoekers lezen deze tekst voor. Zoekmachines gebruiken het ook om de afbeelding te begrijpen.
Lijsten
HTML kent twee soorten lijsten: ongeordend (bolletjes) en geordend (nummers).
<!-- Ongeordende lijst -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Geordende lijst -->
<ol>
<li>Maak een HTML-bestand aan</li>
<li>Open het in een browser</li>
<li>Bekijk het resultaat</li>
</ol>
<ul> staat voor unordered list en <ol> voor ordered list. Elk item staat in een <li>-element (list item).
Semantisch HTML
Naast elementen als <div> (een neutraal blok zonder betekenis) heeft HTML speciale elementen die de betekenis van de inhoud beschrijven. Dit heet semantisch HTML.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>Semantisch voorbeeld</title>
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/blog">Blog</a>
</nav>
</header>
<main>
<article>
<h1>Mijn eerste blogpost</h1>
<p>Dit is de inhoud van de blogpost.</p>
</article>
<aside>
<h2>Gerelateerde artikelen</h2>
</aside>
</main>
<footer>
<p>Gemaakt met HTML in 2024.</p>
</footer>
</body>
</html>
De meest gebruikte semantische elementen:
| Element | Betekenis |
|---|---|
<header> | De koptekst van de pagina of een sectie |
<nav> | Navigatielinks |
<main> | De hoofdinhoud van de pagina |
<article> | Een op zichzelf staand stuk inhoud |
<section> | Een thematisch gegroepeerde sectie |
<aside> | Aanvullende inhoud naast de hoofdinhoud |
<footer> | De voettekst van de pagina of een sectie |
Zoekmachines zoals Google begrijpen je pagina beter als je semantische elementen gebruikt. Schermlezers voor slechtziende bezoekers navigeren ook sneller door een pagina met duidelijke semantiek. En jijzelf begrijpt je eigen code over zes maanden ook nog.
Attributen
Attributen geven extra informatie aan een HTML-element. Je schrijft ze in de openingstag als naam="waarde":
<a href="https://example.com" target="_blank">Externe link</a>
<img src="logo.png" alt="Bedrijfslogo" />
<p class="intro" id="eerste-alinea">Dit is de introductie.</p>
Veelgebruikte attributen:
| Attribuut | Gebruik |
|---|---|
href | URL van een link (<a>) |
src | Pad naar een afbeelding of script (<img>, <script>) |
alt | Alternatieve tekst voor een afbeelding |
class | Koppelt een CSS-klasse aan het element |
id | Geeft een unieke naam aan een element |
lang | Taal van het element of de pagina |
target="_blank" | Opent een link in een nieuw tabblad |
Een element kan meerdere attributen tegelijk hebben. De volgorde maakt niet uit voor de browser.
Een volledig voorbeeld
Hieronder zie je een complete HTML-pagina die alle onderdelen uit dit hoofdstuk combineert:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>Over webdevelopment</title>
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/blog">Blog</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<article>
<h1>Wat leer je bij webdevelopment?</h1>
<p>
Als webdeveloper bouw je websites en webapplicaties. Je
begint altijd met HTML: de basis van elke pagina.
</p>
<h2>De drie kerntechnologieën</h2>
<ol>
<li>HTML: structuur en inhoud</li>
<li>CSS: opmaak en lay-out</li>
<li>JavaScript: gedrag en interactiviteit</li>
</ol>
<h2>Handige links</h2>
<ul>
<li>
<a href="https://developer.mozilla.org/nl/"
>MDN Web Docs</a
>
</li>
<li>
<a href="https://web.dev">web.dev van Google</a>
</li>
</ul>
<img
src="webdevelopment.jpg"
alt="Een laptop met code op het scherm"
/>
</article>
</main>
<footer>
<p>Gemaakt met HTML. Geen CSS nodig voor de structuur.</p>
</footer>
</body>
</html>
Dit is alles wat je nodig hebt om een geldige, toegankelijke HTML-pagina te maken. De browser geeft het resultaat zonder enige CSS al begrijpelijk weer.
Volgende stap
Je kent nu de structuur van HTML: elementen, attributen, semantisch HTML en een volledig document. De pagina heeft nog geen opmaak: geen kleuren, geen lettertypen, geen lay-out. Daarvoor gebruik je CSS.
Ga verder met Wat is CSS? en leer hoe je je HTML-pagina er mooi uit laat zien.