<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, der kein spezifischeres semantisches Element hat, um es zu repräsentieren. Abschnitte sollten immer ein Überschriftselement besitzen, mit nur wenigen Ausnahmen.

Probieren Sie es aus

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 zur Darstellung gibt. Zum Beispiel sollte ein Navigationsmenü in ein <nav>-Element eingeschlossen werden, aber eine Liste von Suchergebnissen oder eine Kartendarstellung mit ihren Steuerelementen haben keine spezifischen Elemente und könnten innerhalb eines <section> platziert werden.

Berücksichtigen Sie auch diese Fälle:

  • Wenn der Inhalt des Elements eine eigenständige, atomare Einheit von Inhalten darstellt, die sinnvollerweise als eigenständiges Stück syndiziert werden kann (z. B. ein Blogpost oder Blogkommentar, oder ein Zeitungsartikel), wäre das <article>-Element die 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 Autorenbiografie), verwenden Sie ein <aside>.
  • Wenn der Inhalt den Hauptinhaltsbereich eines Dokuments darstellt, verwenden Sie <main>.
  • Wenn Sie das Element nur als Stilrahmen verwenden, verwenden Sie stattdessen ein <div>.

Um dies nochmals zu bestätigen, sollte jedes <section> identifiziert werden, typischerweise durch die Einbeziehung einer Überschrift (h1 - h6) als Kind des <section>-Elements, wann immer dies möglich ist. Unten finden Sie Beispiele, wo Sie gegebenenfalls ein <section> ohne Ü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 Webanwendungen/UI-Bereichen anstelle traditioneller Dokumentenstrukturen. In einem Dokument macht es wenig Sinn, einen separaten Abschnitt von Inhalten ohne Überschrift zur Beschreibung seiner Inhalte zu haben. Solche Überschriften sind für alle Leser nützlich, besonders jedoch für Benutzer von unterstützenden Technologien wie Bildschirmlesegeräten, und sie sind auch gut für SEO.

Bedenken Sie jedoch einen sekundären Navigationsmechanismus. Wenn die globale Navigation bereits in ein <nav>-Element eingeschlossen ist, könnten Sie ein vorheriges/nächstes Menü möglicherweise 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 Buttonbar zur Steuerung Ihrer Anwendung? Diese möchte möglicherweise nicht unbedingt eine Überschrift, ist jedoch immer noch 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

Abhängig vom Inhalt könnte die Einbeziehung einer Überschrift auch gut für SEO sein, daher ist dies eine Überlegung wert.

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Abschnittsinhalte, fühlbarer Inhalt.
Erlaubter Inhalt Flussinhalt.
Tag-Auslassung Keine, sowohl das Anfangs- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Flussinhalt akzeptiert. Beachten Sie, dass ein <section>-Element kein Nachkomme eines <address>-Elements sein darf.
Implizierte ARIA-Rolle Region wenn das Element einen zugänglichen Namen hat, ansonsten generisch
Erlaubte 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 Standard
# the-section-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch