<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 zur Darstellung hat. 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.

Verwendungshinweise

Wie oben erwähnt, ist <section> ein generisches Abschnittselement und sollte nur verwendet werden, wenn es kein spezifischeres Element zur Darstellung gibt. Als Beispiel sollte ein Navigationsmenü in einem <nav> Element eingeschlossen werden, aber eine Liste von Suchergebnissen oder eine Kartendarstellung und deren Bedienelemente 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, atomische Inhaltseinheit darstellt, die als eigenständiges Stück syndiziert Sinn ergibt (z. B. ein Blog-Beitrag oder ein Blog-Kommentar, 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 Hauptinhaltbereich eines Dokuments darstellt, verwenden Sie <main>.
  • Wenn Sie das Element nur als Stilumschlag verwenden, verwenden Sie stattdessen ein <div>.

Um es zu wiederholen, jedes <section> sollte identifiziert werden, typischerweise durch das Einfügen einer Überschrift (h1 - h6 Element) als Kind des <section> Elements, wann immer möglich. Sehen Sie unten Beispiele, wo Sie ein <section> ohne eine Überschrift sehen könnten.

Beispiele

Grundlegendes 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 Abschnitt des Inhalts ohne eine Überschrift zu haben, um seinen Inhalt zu beschreiben. Solche Überschriften sind nützlich für alle Leser, insbesondere für Benutzer von unterstützenden Technologien wie Bildschirmlesegeräten, und sie sind auch gut für SEO.

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

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? Dies möchte möglicherweise 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

Abhängig vom Inhalt könnte das Einfügen einer Überschrift auch gut für SEO sein, also ist es eine Überlegung wert.

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Abschnittsinhalte, fühlbarer Inhalt.
Erlaubter Inhalt Flussinhalt.
Tag-Auslassung Keine, sowohl das Anfangs- als auch das Endtag 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, ansonsten 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