HTML elementen, attributen & nesting

Nu je jouw code-editor hebt ingesteld en weet hoe het internet werkt, is het tijd om de bouwstenen van HTML te leren kennen! Elk onderdeel dat je op een website ziet — van een grote titel tot een afbeelding of een klikbare knop — wordt opgebouwd met HTML-elementen.

In deze les ontdek je uit welke onderdelen een HTML-element bestaat, hoe je extra informatie toevoegt via attributen en hoe je elementen op een nette manier in elkaar kunt nesten.

1. Wat is een HTML-element? (Syntaxis)

Een HTML-element is de complete bouwsteen van een stukje inhoud op je webpagina. Een standaard element bestaat uit drie hoofdonderdelen:

Openingstag (<tag>): Geeft aan waar het element begint en welk type inhoud er volgt.
Inhoud (Content): De tekst, afbeelding of het medium dat op het scherm komt te staan.
Sluitingstag (</tag>): Geeft aan waar het element eindigt. Let op de voorwaartse schuine streep (/).

Het anatomie-model van een element:

 <p>  Dit is de inhoud van een paragraaf.  </p>
│   │ │                                    │   │
│   └─ Openingstag                         └─ Sluitingstag
└────────────────── HTML-element ───────────────────┘

Voorbeeld in HTML:

<h1>Welkom op mijn portfolio!</h1>
<p>Ik ben een leerling Grafische Technieken en dit is mijn eerste HTML-pagina.</p>

Lege elementen (Void tags)

Niet alle elementen hebben een sluitingstag of tekstinhoud. Sommige elementen plaatsen we enkel om iets toe te voegen aan de pagina, zoals een afbeelding of een witregel. Dit noemen we lege elementen of void tags:

<!-- Een witregel toevoegen -->
<br>

<!-- Een horizontale scheidingslijn invoegen -->
<hr>

<!-- Een afbeelding invoegen -->
<img src="logo.png" alt="Logo">

2. HTML-attributen (Extra eigenschappen)

Soms heeft een HTML-tag extra informatie nodig om zijn werk goed te kunnen doen. Een afbeeldingstag (<img>) moet bijvoorbeeld weten welke afbeelding hij moet tonen, en een link (<a>) moet weten waarnaar hij moet doorverwijzen.

Deze extra informatie geven we mee met attributen.

De regels voor attributen:

Attributen staan altijd in de openingstag van een element.
Ze bestaan altijd uit een naam en een waarde: naam="waarde".
De waarde staat altijd tussen dubbele quotemerken ("").

Voorbeeld met een hyperlink (`<a>`):

<!-- Het 'href'-attribuut geeft de bestemming van de link aan -->
<a href="[https://www.google.be](https://www.google.be)">Ga naar Google</a>

Veelgebruikte attributen:

Attribuut	Gebruikt in tag	Wat doet het?
`href`	`<a>`	Bepaalt het webadres waar een link naartoe leidt.
`src`	`<img>`, `<script>`	Bepaalt de bron/locatie van het bestand (source).
`alt`	`<img>`	Beschrijvende tekst voor zoekmachines en schermlezers.
`class`	Vrijwel elke tag	Knoopt één of meerdere stijlbladen (CSS) vast aan het element.
`id`	Vrijwel elke tag	Geeft een unieke naam aan één specifiek element.

Belangrijk: Vergeet nooit de dubbele quotemerken rond de attribuutwaarde! Schrijf dus href="contact.html" en niet href=contact.html.

3. Nesting (Elementen in elkaar plaatsen)

In HTML plaatsen we heel vaak elementen binnenin andere elementen. Dit noemen we nesting (nesten). Zo kun je bijvoorbeeld een stukje tekst vetgedrukt maken binnen een paragraaf, of meerdere knoppen in een navigatiebalk groeperen.

De gouden regel van nesting: LIFO

Bij nesten geldt altijd de regel: het element dat je als laatste opent, moet je als eerste weer sluiten (LIFO = Last In, First Out). Je sluit tags in omgekeerde volgorde af van hoe je ze hebt geopend.

✅ GOED (Correct genest):

<!-- De <i> tag is als LAATSTE geopend, dus wordt hij als EERSTE gesloten -->
<p>Dit is een <b>belangrijke <i>tekst</i></b> op de pagina.</p>

❌ FOUT (Verkeerd genest):

<!-- De tags kruisen elkaar: <b> sluit voor <i>, dit is foutieve syntaxis! -->
<p>Dit is een <b>belangrijke <i>tekst</b></i> op de pagina.</p>

4. Inspringen voor leesbare code (Indentation)

Wanneer je elementen diep in elkaar gaat nesten, kan je code al snel onoverzichtelijk worden. Om structuur te behouden, maken we gebruik van inspringen (tabs of spaties).

Het element dat andere elementen omvat noemen we de Parent (ouder). De elementen die erin zitten noemen we de Children (kinderen).

<!-- De <main> is de Parent -->
<main>
    <!-- Deze <h1> en <article> zijn Children en springen één tab in -->
    <h1>Mijn Blogpost</h1>

    <article>
        <!-- Deze <p> is een Child van <article> en springt nóg een tab in -->
        <p>Welkom op mijn persoonlijke blog!</p>
    </article>
</main>

Tip: In VS Code kun je je code automatisch strak laten inspringen met de sneltoets Shift + Alt + F (Windows) of Shift + Option + F (Mac)!

Samenvatting

Een HTML-element bestaat uit een openingstag, inhoud en een sluitingstag (bijv. <p>Tekst</p>).
Lege elementen (zoals <img> en <br>) hebben geen sluitingstag of tekstinhoud.
Attributen geven extra informatie aan een element en staan altijd in de openingstag als naam="waarde".
Nesting betekent het plaatsen van elementen binnenin andere elementen. Sluit de tags altijd in de juiste volgorde af (Last In, First Out).
Gebruik inspringen (indentation) om je code overzichtelijk en leesbaar te houden voor jezelf en je teamgenoten.