<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

<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.

Verwendungsnotizen

Wie oben erwähnt, ist <section> ein generisches Abschnittselement und sollte nur verwendet werden, wenn es kein spezifischeres Element gibt. Ein Navigationsmenü sollte beispielsweise in ein <nav> Element eingeschlossen werden, aber eine Liste von Suchergebnissen oder eine Kartendarstellung mit Steuerelementen haben keine spezifischen Elemente und könnten in einem <section> platziert werden.

Berücksichtigen Sie auch diese Fälle:

  • Wenn der Inhalt des Elements eine eigenständige, atomare Einheit darstellt, die als eigenständiges Stück sinnvoll ist (z. B. ein Blogeintrag 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 Autorenbiografie), verwenden Sie ein <aside>.
  • Wenn der Inhalt den Hauptinhaltbereich eines Dokuments darstellt, verwenden Sie <main>.
  • Wenn Sie das Element nur als Styling-Wrapper verwenden, verwenden Sie stattdessen ein <div>.

Zur Verdeutlichung sollte jede <section> identifiziert werden, typischerweise durch das Einfügen einer Überschrift (ein h1 - h6 Element) als Kind des <section> Elements, wann immer möglich. Unten finden Sie Beispiele, wo Sie eine <section> ohne Überschrift sehen könnten.

Beispiele

Grundlegendes Verwendungsbeispiel

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 <section> ohne Überschrift verwendet wird, finden sich typischerweise in Webanwendungs-/UI-Abschnitten und nicht in traditionellen Dokumentstrukturen. In einem Dokument ergibt es wenig Sinn, einen separaten Inhaltsabschnitt zu haben, ohne eine Überschrift, die den Inhalt beschreibt. Solche Überschriften sind für alle Leser nützlich, besonders jedoch für Benutzer unterstützender Technologien wie Screenreader und sind auch gut für SEO.

Betrachten Sie jedoch einen sekundären Navigationsmechanismus. Wenn die globalen Navigation bereits in einem <nav> Element eingeschlossen ist, könnten Sie ein vorheriges/nächstes Menü in einem <section> umwickeln:

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

Oder was ist mit einer Art von Schaltflächenleiste zur Steuerung Ihrer App? Diese möchte möglicherweise keine Ü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 Einfügen einer Überschrift auch gut für SEO sein, daher ist dies eine Option, die in Betracht gezogen werden sollte.

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Abschnittsinhalt, spürbarer Inhalt.
Erlaubte Inhalte Flussinhalt.
Tag-Auslassung Keine, sowohl das öffnende als auch das schließende Tag sind erforderlich.
Erlaubte Eltern Jedes Element, das Flussinhalt akzeptiert. Beachten Sie, dass ein <section> Element kein Nachkomme 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-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-section-element

Browser-Kompatibilität

Siehe auch