HTML: Semantische Elementen

Wat zijn Semantische HTML-elementen?

Semantische elementen geven betekenis aan je content. Ze beschrijven de rol van het inhoudselement in de pagina.

Veelgebruikte Semantische Elementen

Header

Gebruikt voor de koptekst van een pagina of sectie.

<header>
    <h1>Mijn Website</h1>
</header>

Nav

Gebruikt voor navigatielinks.

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#over">Over Mij</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

Main

Bevat de hoofdinhoud van de pagina.

<main>
    <!-- Hoofdinhoud hier -->
</main>

Section

Definieert een sectie in het document.

<section>
    <h2>Mijn Hobby's</h2>
    <p>Ik hou van programmeren en sporten.</p>
</section>

Article

Gebruikt voor zelfstandige content zoals blogposts.

<article>
    <h2>Mijn Eerste Blogpost</h2>
    <p>Welkom bij mijn blog!</p>
</article>

Aside

Bevat inhoud die gerelateerd is aan de hoofdinhoud, zoals zijbalken.

<aside>
    <h3>Gerelateerde Links</h3>
    <ul>
        <li><a href="#link1">Link 1</a></li>
    </ul>
</aside>

Footer

Bevat de voettekst van de pagina of sectie.

<footer>
    <p>&copy; 2023 Mijn Naam</p>
</footer>

Waarom Semantische HTML Gebruiken?

• Betere toegankelijkheid: Hulpmiddelen zoals schermlezers kunnen de pagina beter interpreteren.
• Betere SEO: Zoekmachines begrijpen de structuur van je pagina beter.
• Betere onderhoudbaarheid: Je code is overzichtelijker en makkelijker te begrijpen.