⏱️ Leestijd: ca. 4 min.

Basis semantische elementen

In de beginjaren van het web werden websites opgebouwd met eindeloos veel onzijdige <div>-tags. Een pagina zag er voor de bezoeker prima uit, maar computers, zoekmachines en schermlezers hadden geen idee wát de verschillende onderdelen betekenden.

Sinds de komst van HTML5 gebruiken we semantische elementen. Het woord semantiek betekent 'betekenisleer'. Een semantische tag vertelt aan de browser en de ontwikkelaar direct wat voor functie de inhoud heeft.

In deze les leer je de vier belangrijkste bouwstenen kennen om de basisstructuur van een professionele webpagina op te zetten: <header>, <nav>, <main> en <footer>.

1. Waarom gebruiken we semantische HTML?

Voordat we de elementen indijken, is het belangrijk om te weten waarom we de voorkeur geven aan semantische tags boven blanco containers zoals <div>:

2. De 4 Hoofdelementen van een Pagina-indeling

Stel je een webpagina voor als een krant of een tijdschrift. De pagina is logisch opgedeeld in vaste zones:

+-------------------------------------------------------+
|                       HEADER                          |
|  +-------------------------------------------------+  |
|  |                      NAV                        |  |
|  +-------------------------------------------------+  |
+-------------------------------------------------------+
|                                                       |
|                       MAIN                            |
|                                                       |
|  (Inhoud van de pagina: teksten, afbeeldingen, etc.)  |
|                                                       |
+-------------------------------------------------------+
|                       FOOTER                          |
+-------------------------------------------------------+

A. Het <header> element (De Kop)

De <header> bevat de inleidende informatie van een webpagina of van een specifieke sectie. Dit is meestal het eerste wat een bezoeker ziet bovenaan de pagina.

Wat hoort er in een <header>?

<header>
    <img src="images/logo-studio.svg" alt="Logo Studio Grafix">
    <h1>Grafisch Portfolio</h1>
</header>

B. Het <nav> element (De Navigatie)

Het <nav> element is speciaal bedoeld voor het hoofdmenu en belangrijke navigatieblokken op je website. Het bevat de links waarmee bezoekers door jouw site navigeren.

Wat hoort er in een <nav>?

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="pages/portfolio.html">Portfolio</a></li>
        <li><a href="pages/over-ons.html">Over Ons</a></li>
        <li><a href="pages/contact.html">Contact</a></li>
    </ul>
</nav>
Belangrijk: Niet elke link op je pagina hoort in een <nav>! Losse links in een alinea of een link in de footer naar de gebruiksvoorwaarden hebben geen <nav> tag nodig. Gebruik <nav> alleen voor de belangrijkste navigatieblokken.

C. Het <main> element (De Hoofdinhoud)

Het <main> element omvat de unieke hoofdinhoud van het document. Dit is het belangrijkste gedeelte van je webpagina: het artikel, de portfolio-galerij, het productoverzicht of het contactformulier.

De belangrijkste regels voor <main>:

<main>
    <h2>Mijn Nieuwste Grafische Projecten</h2>
    <p>Bekijk hieronder mijn meest recente werk voor het vak Grafische Technieken.</p>

    <!-- Hier komt de unieke inhoud van deze specifieke pagina -->
    <img src="images/poster-ontwerp.jpg" alt="A2 Posterontwerp">
</main>

D. Het <footer> element (De Voet)

Het <footer> element bevindt zich onderaan de pagina (of onderaan een specifiek artikel). Het bevat de afsluitende informatie.

Wat hoort er in een <footer>?

<footer>
    <p>&copy; 2026 Studio Grafix — Alle rechten voorbehouden.</p>
    <p>Volg mijn werk via <a href="[https://instagram.com](https://instagram.com)" target="_blank">Instagram</a>.</p>
</footer>

3. Een Compleet Praktijkvoorbeeld

Laten we alle vier de semantische elementen samenvoegen in één strakke, professionele HTML5-basisstructuur:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Studio Grafix - Portfolio</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>

    <!-- 1. KOP VAN DE WEBSITE -->
    <header>
        <img src="images/logo.svg" alt="Studio Grafix Logo">
        
        <!-- 2. HOOFDNAVIGATIE -->
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="pages/werk.html">Mijn Werk</a></li>
                <li><a href="pages/contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- 3. UNIEKE HOOFDINHOUD -->
    <main>
        <h1>Welkom bij Studio Grafix</h1>
        <p>Ik ben gespecialiseerd in meridentiteit, typografie en front-end webdesign.</p>
        
        <section class="project-preview">
            <h2>Uitgelicht Project</h2>
            <img src="images/branding-mockup.jpg" alt="Branding identiteit voor een lokaal koffiehuis">
        </section>
    </main>

    <!-- 4. VOET VAN DE WEBSITE -->
    <footer>
        <p>&copy; 2026 Studio Grafix - Ontworpen voor Grafische Technieken</p>
    </footer>

</body>
</html>
Tip: Onthoud dat deze semantische elementen van zichzelf nog geen visuele styling hebben (ze zien er zonder CSS uit als gewone blokken onder elkaar). We gebruiken ze puur om de inhoudelijke structuur van de webpagina logisch op te bouwen!

Samenvatting