HTML eerste stappen - les 1 - de tags h1–h6, p, strong

11/10/2025, by Ivan

Lees over het aanmaken van HTML-documenten in HTML – eerste stappen.

In de vorige les hebben we ons eerste HTML-document gemaakt.

<html>
  <head>
    <title>Mijn eerste HTML-document</title>
  </head>
  <body>
    HTML mijn eerste stappen
  </body>
</html>

In deze les gaan we ons document vullen met tekst. Laten we de meest gebruikte tag in HTML toevoegen: de tag . Vergeet niet dat tags in het Latijnse alfabet worden geschreven — dit is geen Russische “эр”. De tag is een afkorting van het Engelse woord paragraph (paragraaf) en betekent tekstalinea.

Alle tekst in HTML moet binnen een tag staan, dus laten we onze tekst in een -tag plaatsen:

<html>
  <head>
    <title>Mijn eerste HTML-document</title>
  </head>
  <body>
    <p>HTML mijn eerste stappen</p>
  </body>
</html>

Visueel is ons document niet veranderd, maar de HTML-structuur is nu wel correcter. We kunnen ook meerdere alinea’s toevoegen:

<html>
  <head>
    <title>Mijn eerste HTML-document</title>
  </head>
  <body>
    <p>HTML mijn eerste stappen</p>
    <p>Elke jager wil</p>
    <p>weten waar</p>
    <p>de fazant zit</p>
  </body>
</html>

Zoals je ziet, is alles vrij eenvoudig. De -tags staan op hetzelfde niveau.

Laten we nu een kop (titel) aan ons document toevoegen. Waarom zijn koppen belangrijk in HTML? Ten eerste om tekst te structureren — gestructureerde tekst is gemakkelijker en sneller te lezen en te begrijpen. Ten tweede zijn koppen erg belangrijk voor zoekmachineoptimalisatie (SEO). Je moet dus niet vergeten koppen te gebruiken in je tekst.

Voor koppen gebruiken we de tags h1, h2, h3, h4, h5 en h6. Het cijfer na de letter h (van header) geeft de belangrijkheid van de kop aan. Er mag slechts één h1-kop per pagina zijn — deze geeft aan waar de pagina over gaat. Daarna kun je h2 en h3 gebruiken, gevolgd door h4 enzovoort. Zes niveaus van koppen zijn meestal meer dan genoeg.

<html>
  <head>
    <title>Mijn eerste HTML-document</title>
  </head>
  <body>
    <h1>Mijn eerste HTML-document</h1><br>    <h2>Mijn eerste stappen</h2>
    <p>HTML mijn eerste stappen</p>
    <h3>Nog een stap</h3><br>    <h2>Zo zeggen ze</h2>
    <p>Elke jager wil</p>
    <p>weten waar</p>
    <p>de fazant zit</p>
  </body>
</html>

Je hebt waarschijnlijk gemerkt dat de lettergrootte van de h-tags afhangt van het cijfer erachter. Zo laat de browser zien welke kop belangrijker is dan de volgende.

Een ander kenmerk van de tags h1–h6 is dat ze standaard vet worden weergegeven. Je kunt tekst ook vet maken met de tag :

<html>
  <head>
    <title>Mijn eerste HTML-document</title>
  </head>
  <body>   <h1>Mijn eerste HTML-document</h1>
    <h2>Mijn eerste stappen</h2>
    <p>HTML mijn eerste stappen</p>
   <h3>Nog een stap</h3>
   <h2>Zo zeggen ze</h2>
    <p>Elke <strong>jager</strong> wil</p>
    <p>weten waar</p>
    <p>de fazant zit</p>
  </body>
</html>

Merk op dat we om tekst vet te maken de tag strong gebruiken. Je mag h1–h6-tags niet binnen een -tag gebruiken! Onthoud dit goed — het gebruik van h1–h6 binnen kan de positie van een website in Google ernstig schaden.

Zo is het juist:

<p>Zeer <strong>vette</strong> tekst</p>

En dit is fout:

<p><h3>doe dit</h3> niet!</p>

Ik denk dat je nu al in staat bent om zoveel tekst aan een pagina toe te voegen als je wilt, deze vet te maken en — het belangrijkste — dit op de juiste manier te doen.

Extra Block Types (EBT) - Nieuwe Layout Builder ervaring❗

❗Extra Paragraph Types (EPT) - Nieuwe Paragraphs ervaring

HTML eerste stappen - les 1 - de tags h1–h6, p, strong