<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>-Element HTML stellt einen generischen, eigenständigen Abschnitt eines Dokuments dar, für den es kein spezifischeres semantisches Element gibt. Abschnitte sollten immer eine Überschrift haben, mit sehr wenigen Ausnahmen.

Probieren Sie es aus

<h1>Choosing an Apple</h1>
<section>
  <h2>Introduction</h2>
  <p>
    This document provides a guide to help with the important task of choosing
    the correct Apple.
  </p>
</section>

<section>
  <h2>Criteria</h2>
  <p>
    There are many different criteria to be considered when choosing an Apple —
    size, color, firmness, sweetness, tartness...
  </p>
</section>

h1,
h2 {
  margin: 0;
}

Attribute

Dieses Element enthält nur die globalen Attribute.

Nutzungshinweise

Wie oben erwähnt, ist <section> ein generisches Abschnittselement und sollte nur verwendet werden, wenn es kein spezifischeres Element gibt, das es repräsentiert. Ein Navigationsmenü sollte beispielsweise in ein <nav>-Element eingewickelt werden, aber eine Liste von Suchergebnissen oder eine Kartendarstellung und deren Steuerungselemente haben keine spezifischen Elemente und könnten innerhalb eines <section>-Elements platziert werden.

Betrachten Sie auch diese Fälle:

  • Wenn der Inhalt des Elements eine eigenständige, atomare Inhaltseinheit darstellt, die als eigenständiges Stück syndiziert Sinn macht (z. B. ein Blogbeitrag oder Blogkommentar oder ein Zeitungsartikel), wäre das <article>-Element eine bessere Wahl.
  • Wenn der Inhalt nützliche, tangentiale Informationen darstellt, die neben dem Hauptinhalt funktionieren, aber nicht direkt Teil davon sind (wie verwandte Links oder eine Autoren-Biografie), verwenden Sie ein <aside>.
  • Wenn der Inhalt den Hauptinhalt eines Dokuments darstellt, verwenden Sie <main>.
  • Wenn Sie das Element nur als Styling-Wrapper verwenden, verwenden Sie stattdessen ein <div>.

Um es zu wiederholen, jeder <section> sollte identifiziert werden, typischerweise indem eine Überschrift (h1 - h6-Element) als Kind des <section>-Elements enthalten wird, wann immer möglich. Siehe unten Beispiele, wo Sie möglicherweise ein <section> ohne eine Überschrift sehen könnten.

Beispiele

Einfaches Nutzungsbeispiel

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

Umstände, in denen Sie <section> ohne eine Überschrift sehen könnten, finden sich typischerweise in Webanwendungs-/UI-Abschnitten und nicht in traditionellen Dokumentstrukturen. In einem Dokument macht es eigentlich keinen Sinn, einen separaten Inhaltsabschnitt ohne eine Überschrift zu haben, die den Inhalt beschreibt. Solche Überschriften sind für alle Leser nützlich, aber besonders für Benutzer von unterstützenden Technologien wie Bildschirmlesern, und sie sind auch gut für SEO.

Betrachten Sie jedoch einen sekundären Navigationsmechanismus. Wenn die globale Navigation bereits in ein <nav>-Element eingewickelt ist, könnten Sie ein Vorher-/Nächstes-Menü in ein <section> einwickeln:

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

Oder wie wäre es mit einer Art Buttonleiste zur Steuerung Ihrer App? Diese könnte möglicherweise keine Überschrift benötigen, aber es ist 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 Hinzufügen einer Überschrift auch gut für SEO sein, daher ist es eine Überlegung wert.

Technische Zusammenfassung

Inhaltskategorien Fließinhalt, Abschnittsinhalte, wahrnehmbarer Inhalt.
Zulässiger Inhalt Fließinhalt.
Tag-Auslassung Keine, sowohl das öffnende als auch das schließende Tag sind erforderlich.
Zulässige Eltern Jedes Element, das Fließinhalt akzeptiert. Beachten Sie, dass ein <section>-Element kein Nachfahre eines <address>-Elements sein darf.
Implizierte ARIA-Rolle region wenn das Element einen zugänglichen Namen hat, sonst generic
Zulässige ARIA-Rollen alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-section-element

Browser-Kompatibilität

Siehe auch