HTML: inhoud elementen

Als je complexere pagina's wil bouwen, zal je de nood voelen om meer en meer elementen toe te gaan voegen.

<div> en <span>

Er bestaan 2 HTML tags die geen semantische waarde hebben:

• <div>: generiek block element
• <span>: generiek inline element

Je kan deze gebruiken om structuur toe te voegen. Controleer wel eerst of je geen enkel ander semantisch element kan gebruiken.

Semantische inhoud-elementen

Volgende inhoud-elementen kan je gebruiken om je inhoud te structureren.

• <header>: groepeert inleidende inhoud of navigatiehulpmiddelen
• <main>: bevat de hoofdinhoud van een pagina.
• <footer>: de voettekst van een pagina of van de omvattende semantische sectie
• <section>: een groepering van content. (bijvoorbeeld een titel + paragrafen)
• <article>: een zelfstandig stuk content die op zich staat. (mag genest worden)
• <nav>: een onderdeel van de pagina die navigatie aanbied
• <aside>: groepering van informatie die verwante informatie bevat
• <address>: groepering van contacteer-informatie van een persoon of organisatie

Voorbeeld:

<header>
  <p>Logo</p>
  <nav>
    <ul>
      <li><a href="index.html">Homepagina</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Pagina titel</h1>
  <p>Introductie</p>

  <section>
    <h2>Nieuws</h2>
    <article>
      <header>
        <h3>Titel van het nieuwsbericht</h3>
        <time>08.12.2014</time>
      </header>
      <p>Inhoud van het nieuwsbericht
    </article>
    <aside>
      <p>Volg ons op <a href="https://mastodon.social" target="_blank">social media</a> voor real-time nieuws.</p>
    </aside>
  </section>
</main>

<footer>
  <address>
    Bezoek ons:<br>
    Leeuwstraat 1<br>
    9000 Gent
  </address>
  <p>© 2025 Artvelde Hogeschool</p>
</footer>