<section>

Das <section>-Element dient der thematischen Gruppierung von Inhalten. Es sollte immer dann verwendet werden, wenn du einen logisch zusammengehörenden Bereich deiner Seite kennzeichnen möchtest, zum Beispiel ein “Features”-Bereich, eine “Preise”-Sektion oder ein “Team”-Abschnitt.

Wichtige Unterscheidungen:

section vs. div: Während <div> ein rein generisches Container-Element ohne semantische Bedeutung ist, signalisiert <section>, dass hier ein thematischer Abschnitt mit eigenständiger Bedeutung vorliegt. Nutze <section> nur, wenn der Inhalt logisch als eigener Bereich in einem Inhaltsverzeichnis auftauchen würde.

section vs. article: Ein <article> ist eigenständig und könnte separat veröffentlicht werden (z.B. ein Blog-Post). Ein <section> ist Teil eines größeren Ganzen und gruppiert thematisch zusammengehörige Inhalte innerhalb einer Seite. Ein Artikel kann mehrere Sections enthalten, aber Sections sind keine eigenständigen Publikationen.

Eine Section sollte fast immer eine Überschrift (<h2>, <h3> etc.) enthalten. Wenn du keine passende Überschrift findest, ist wahrscheinlich <div> die bessere Wahl.

Thematische Abschnitte einer Landing Page

Eine typische Landing Page besteht aus mehreren thematischen Bereichen. Jeder sollte als <section> ausgezeichnet werden.

<main>
  <section>
    <h2>Features</h2>
    <p>Unsere App bietet diese Funktionen...</p>
  </section>

  <section>
    <h2>Preise</h2>
    <p>Ab 9€ pro Monat.</p>
  </section>

  <section>
    <h2>Kontakt</h2>
    <p>Schreib uns eine Nachricht.</p>
  </section>
</main>

Section innerhalb eines Artikels

Ein längerer Artikel kann in mehrere thematische Abschnitte unterteilt werden.

<article>
  <h1>JavaScript Grundlagen</h1>

  <section>
    <h2>Variablen</h2>
    <p>Mit let und const deklarierst du Variablen.</p>
  </section>

  <section>
    <h2>Funktionen</h2>
    <p>Funktionen sind wiederverwendbare Code-Blöcke.</p>
  </section>
</article>

Verschachtelte Sections

Sections können verschachtelt werden, wenn ein thematischer Bereich selbst Unterbereiche hat.

<section>
  <h2>Unsere Kurse</h2>

  <section>
    <h3>Frontend</h3>
    <p>HTML, CSS, JavaScript</p>
  </section>

  <section>
    <h3>Backend</h3>
    <p>Node.js, Python, Datenbanken</p>
  </section>
</section>

Das <section>-Element wird von Screenreadern als strukturierendes Element erkannt. Wenn du einer Section ein aria-label oder aria-labelledby-Attribut gibst, wird sie als ARIA-Landmark (Region) behandelt und erscheint in der Landmark-Navigation.

Wichtige Hinweise:

• Jede Section sollte eine sichtbare Überschrift haben, damit Screenreader-Nutzer die Struktur verstehen können
• Nutze aria-label nur, wenn die Section keine sichtbare Überschrift hat (was selten der Fall sein sollte)
• Sections ohne Überschrift sind für Screenreader-Nutzer schwer zu navigieren

<!-- Gut: Mit sichtbarer Überschrift -->
<section>
  <h2>Unsere Mission</h2>
  <p>Wir wollen...</p>
</section>

<!-- Alternativ: Mit ARIA-Label als Landmark -->
<section aria-label="Firmengeschichte">
  <p>Gegründet 2020...</p>
</section>

Das <section>-Element wird von allen modernen Browsern vollständig unterstützt.

Browser-Support für das section-Element:

• Chrome

  Komplett

  Seit Version 5 (2010)

• Firefox

  Komplett

  Seit Version 4 (2011)

• Safari

  Komplett

  Seit Version 5 (2010)

• Edge

  Komplett

  Alle Versionen

• Opera

  Komplett

  Seit Version 11.5 (2011)

Das <section>-Element hat in HTML-E-Mails sehr eingeschränkte Unterstützung und sollte vermieden werden.

Email-Client-Support für das section-Element:

• Gmail

  Teilweise

  Wird als div interpretiert, keine semantische Bedeutung

• Outlook

  Keine

  Wird ignoriert oder entfernt

• Apple Mail

  Teilweise

  Funktioniert, aber semantische Bedeutung geht verloren

• Thunderbird

  Teilweise

  Grundlegende Unterstützung

Empfehlung für E-Mails: Nutze in HTML-E-Mails <div> oder <table> für die Strukturierung statt semantischer Elemente wie <section>. Die semantische Bedeutung wird ohnehin nicht unterstützt, und du vermeidest Darstellungsprobleme.