# 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.

```html
<header>
    <h1>Mijn Website</h1>
</header>
```

#### Nav

Gebruikt voor navigatielinks.

```html
<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.

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

#### Section

Definieert een sectie in het document.

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

#### Article

Gebruikt voor zelfstandige content zoals blogposts.

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

#### Aside

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

```html
<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.

```html
<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.