Wanneer moet je de tags <div> en <span> gebruiken in HTML-markering?

De tags div en span zijn universele containers die worden gebruikt om elementen te groeperen en stijlen toe te passen.

• div (divisie): Blokelement. Maakt een nieuwe regel voor en na de inhoud. Wordt gebruikt om grote inhoudssecties te groeperen, zoals koppen, hoofdinhoud, voetteksten, zijbalken. Wordt gebruikt om de lay-out van de pagina te maken met CSS.

• span: Inline-element. Maakt geen nieuwe regel. Wordt gebruikt om kleine delen van inhoud binnen een regel te groeperen, zoals woorden of zinnen. Wordt gebruikt om stijl toe te passen op een fragment van tekst zonder de omliggende elementen te beïnvloeden.

Voorbeeld van gebruik van div:

<!-- Groepering van de kopsectie van de site -->
<div class="header">
  <h1>Logo</h1>
  <nav>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
    </ul>
  </nav>
</div>

<!-- Groepering van de hoofdinhoud -->
<div class="main-content">
  <article>
    <h2>Artikel titel</h2>
    <p>Artikel inhoud...</p>
  </article>
</div>

Voorbeeld van gebruik van span:

<p>Dit is een normale tekst met <span class="highlight">benadrukt</span> woord.</p>

<style>
  .highlight {
    color: blue; /* Toepassing van stijl alleen op het woord "benadrukt" */
    font-weight: bold;
  }
</style>

Deze tags moeten worden gebruikt met semantisch passende klassen of identificaties voor betere leesbaarheid en onderhoud van de code, evenals voor styling- en DOM-manipulatie doeleinden. Overmatig gebruik van div en span moet worden vermeden, waar meer semantische HTML5-tags (zoals header, footer, article, nav, section) geschikter zijn.