<section>

Zuletzt aktualisiert am 3. Februar 2026

Das <section>-Element gruppiert thematisch zusammengehörige Inhalte und sollte in der Regel eine eigene Überschrift haben. Es strukturiert eine Seite in logische Abschnitte und macht die Dokumentstruktur für Browser, Screenreader und Suchmaschinen verständlicher. Anders als <div> hat <section> eine semantische Bedeutung und sollte nur verwendet werden, wenn der Inhalt wirklich einen eigenständigen thematischen Bereich darstellt.

Grundlagen

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.

Syntax

<section>
  <h2>Über uns</h2>
  <p>Wir sind ein Team von Entwicklern.</p>
</section>

Beispiele

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>

Barrierefreiheit

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>

Häufige Fehler

Section ohne Überschrift: Das häufigste Problem ist die Verwendung von <section> ohne Überschrift. Wenn du keine passende Überschrift findest, solltest du wahrscheinlich <div> verwenden. Eine Section ohne Heading ist semantisch fragwürdig und für Screenreader-Nutzer verwirrend.

Section als Styling-Container: Verwende <section> nicht einfach als generischen Container für CSS-Styling. Dafür ist <div> gedacht. Nutze <section> nur, wenn der Inhalt wirklich einen thematischen Abschnitt darstellt.

Zu viele Sections: Nicht jeder Absatz oder jede kleine Gruppe von Elementen braucht eine eigene Section. Übertreib es nicht: Sections sollten größere thematische Einheiten markieren.

Section statt article: Wenn der Inhalt eigenständig ist und für sich allein veröffentlicht werden könnte (Blog-Post, News-Artikel, Forenbeitrag), nutze <article> statt <section>.

Browser-Kompatibilität

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

Browser-Support für das section-Element:

Email-Kompatibilität

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:

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.

Verwandte Elemente