Semantische HTML en Paginstructuur

Tot nu toe heb je geleerd hoe je elementen op een webpagina bouwt. Laten we nu verbeteren hoe je inhoud gestructureerd en begrepen wordt.

Wat is semantische HTML?

Semantische HTML betekent het gebruik van elementen die duidelijk het doel van je inhoud beschrijven. In plaats van generieke containers zoals <div> te gebruiken, maak je gebruik van betekenisvolle tags zoals:

• <header>;
• <nav>;
• <section>;
• <article>;
• <footer>.

Waarom is het belangrijk

• Helpt browsers en ontwikkelaars om de structuur van je pagina te begrijpen;
• Verbetert toegankelijkheid (schermlezers zijn hiervan afhankelijk);
• Helpt zoekmachines om je inhoud beter te interpreteren.

Veelvoorkomende semantische elementen

<header>

Vertegenwoordigt het bovenste gedeelte van een pagina of sectie (logo, titel, navigatie).

<header>
  <h1>My Website</h1>
</header>

<nav>

Definieert navigatielinks.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

<section>

Groepeert gerelateerde inhoud.

<section>
  <h2>Services</h2>
  <p>We offer web development...</p>
</section>

<article>

Stelt zelfstandige inhoud voor (bijv. blogbericht).

<article>
  <h2>Blog Post</h2>
  <p>Content goes here...</p>
</article>

<footer>

Definieert het onderste gedeelte van een pagina.

<footer>
  <p>&copy; My Website</p>
</footer>

Hoe het er samen uitziet