Hoe gebruik ik headings (h1–h6)?

Headings (koppen) geven de structuur en hiërarchie van je pagina aan. Gebruik één <h1> per pagina voor het hoofdonderwerp en daarna logisch dalende niveaus (<h2>, <h3>, …). Koppen zijn voor betekenis, niet voor styling; opmaak doe je met CSS.

Stappenplan:

1. Bepaal het hoofdonderwerp van de pagina en maak daar één <h1> voor.
2. Verdeel de inhoud in secties met <h2>; subsecties krijgen <h3>, enzovoort.
3. Sla geen niveaus over: ga niet van <h1> direct naar <h4> zonder reden.
4. Gebruik CSS voor grootte/kleur; gebruik geen kopniveau om het lettertype te forceren.

Voorbeeld: goede structuur

<header>
  <h1>Portfolio van Sam</h1>
</header>

<main>
  <section>
    <h2>Projecten</h2>
    <article>
      <h3>Weerapp</h3>
      <p>Beschrijving van het project…</p>
    </article>
    <article>
      <h3>Receptensite</h3>
      <p>Korte toelichting…</p>
    </article>
  </section>

  <section>
    <h2>Over mij</h2>
    <p>Ik ben Sam, front-end leerling…</p>
  </section>
</main>

<footer>
  <p>&copy; 2025 Sam</p>
</footer>

Veelgemaakte fouten (en oplossingen)

• Meerdere <h1>-elementen op één pagina → houd het bij één <h1>.
• Kop overslaan (bijv. van <h2> naar <h4>) → ga stap voor stap omlaag.
• Koppen gebruiken voor opmaak (om iets groot/vet te maken) → gebruik CSS (font-size, font-weight).
• Te lange koppen → houd koppen kort en beschrijvend.

Mini-CSS voor opmaak (optioneel)

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }