Wann sollten die Tags <div> und <span> im HTML-Markup verwendet werden?

Die Tags div und span sind universelle Container, die zum Gruppieren von Elementen und Anwenden von Stilen verwendet werden.

• div (Division): Blockelement. Erzeugt eine neue Zeile vor und nach seinem Inhalt. Wird verwendet, um große Inhaltsabschnitte wie Überschriften, Hauptinhalt, Fußzeilen, Seitenleisten zu gruppieren. Wird genutzt, um das Seitenlayout mit CSS zu erstellen.

• span: Inline-Element. Erzeugt keine neue Zeile. Wird verwendet, um kleine Textteile innerhalb einer Zeile zu gruppieren, wie einzelne Wörter oder Phrasen. Wird genutzt, um einem Textausschnitt Stil zu verleihen, ohne die umgebenden Elemente zu beeinflussen.

Beispiel für die Verwendung von div:

<!-- Gruppierung des Website-Headers -->
<div class="header">
  <h1>Logo</h1>
  <nav>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
    </ul>
  </nav>
</div>

<!-- Gruppierung des Hauptinhalts -->
<div class="main-content">
  <article>
    <h2>Artikelüberschrift</h2>
    <p>Inhalt des Artikels...</p>
  </article>
</div>

Beispiel für die Verwendung von span:

<p>Dies ist ein normaler Text mit <span class="highlight">hervorgehobenem</span> Wort.</p>

<style>
  .highlight {
    color: blue; /* Stil nur auf das Wort "hervorgehoben" anwenden */
    font-weight: bold;
  }
</style>

Diese Tags sollten mit semantisch passenden Klassen oder IDs verwendet werden, um die Lesbarkeit und Wartbarkeit des Codes zu verbessern sowie für Styling- und DOM-Manipulationszwecke. Es ist wichtig, den übermäßigen Einsatz von div und span zu vermeiden, wo semantischere HTML5-Tags wie header, footer, article, nav, section geeigneter sind.