<section>: Das generische Abschnittselement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <section> HTML-Element repräsentiert einen generischen eigenständigen Abschnitt eines Dokuments, für den es kein spezifischeres semantisches Element gibt. Abschnitte sollten immer eine Überschrift haben, mit sehr wenigen Ausnahmen.

Probieren Sie es aus

Attribute

Dieses Element umfasst nur die globalen Attribute.

Anwendungshinweise

Wie oben erwähnt, ist <section> ein generisches Gliederungselement und sollte nur verwendet werden, wenn es kein spezifischeres Element gibt, das es repräsentiert. Ein Navigationsmenü sollte zum Beispiel in ein <nav>-Element eingebettet werden, aber eine Liste von Suchergebnissen oder eine Kartenanzeige mit Steuerelementen haben keine spezifischen Elemente und könnten in ein <section> eingefügt werden.

Berücksichtigen Sie auch diese Fälle:

  • Wenn der Inhalt des Elements eine eigenständige, atomare Inhaltseinheit darstellt, die sich als unabhängiges Stück sinnvoll syndizieren lässt (z.B. ein Blogpost oder Blogkommentar oder ein Zeitungsartikel), wäre das <article>-Element die bessere Wahl.
  • Wenn der Inhalt nützliche, nebensächliche Informationen darstellt, die neben dem Hauptinhalt funktionieren, aber nicht direkt Teil davon sind (wie verwandte Links oder eine Autorenbiografie), verwenden Sie ein <aside>.
  • Wenn der Inhalt den Hauptinhaltsbereich eines Dokuments darstellt, verwenden Sie <main>.
  • Wenn Sie das Element nur als Styling-Wrapper verwenden, verwenden Sie stattdessen ein <div>.

Um es noch einmal zu betonen: Jedes <section> sollte identifiziert werden, typischerweise durch Einfügen einer Überschrift (h1 - h6-Element) als untergeordnetes Element des <section>, wann immer möglich. Im Folgenden finden Sie Beispiele, wo Sie ein <section> ohne eine Überschrift sehen könnten.

Beispiele

Einfaches Anwendungsbeispiel

Vorher

html
<div>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</div>
Ergebnis

Nachher

html
<section>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</section>
Ergebnis

Verwendung eines Abschnitts ohne Überschrift

Fälle, in denen Sie <section> ohne eine Überschrift sehen könnten, finden sich typischerweise in Bereichen von Webanwendungen/UI eher als in traditionellen Dokumentstrukturen. In einem Dokument macht es wenig Sinn, einen separaten Inhaltsabschnitt ohne eine Überschrift zu haben, die seinen Inhalt beschreibt. Solche Überschriften sind für alle Leser nützlich, insbesondere aber für Benutzer unterstützender Technologien wie Screenreader und sie sind auch gut für SEO.

Erwägen Sie jedoch einen sekundären Navigationsmechanismus. Wenn die globale Navigation bereits in ein <nav>-Element eingebettet ist, könnten Sie ein Vor-/Zurück-Menü in ein <section> einbetten:

html
<section>
  <a href="#">Previous article</a>
  <a href="#">Next article</a>
</section>

Oder was ist mit einer Art von Symbolleiste zur Steuerung Ihrer Anwendung? Möglicherweise möchte diese nicht unbedingt eine Überschrift, ist aber dennoch ein eigenständiger Abschnitt des Dokuments:

html
<section>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>
</section>

Ergebnis

Je nach Inhalt könnte das Einschließen einer Überschrift auch gut für SEO sein, daher ist es eine Option, die in Betracht gezogen werden sollte.

Technische Zusammenfassung

Inhaltskategorien Flow-Inhalt, Gliederungsinhalt, greifbarer Inhalt.
Erlaubter Inhalt Flow-Inhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Flow-Inhalt akzeptiert. Beachten Sie, dass ein <section>-Element kein Nachfahre eines <address>-Elements sein darf.
Implizite ARIA-Rolle region wenn das Element einen zugänglichen Namen hat, andernfalls generic
Erlaubte ARIA-Rollen alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel
DOM-Interface [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML Standard
# the-section-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch