<section> HTML generisches Abschnitts-Element - HTML | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

<section> HTML generisches Abschnitts-Element

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Das <section> HTML-Element repräsentiert einen generischen eigenständigen Abschnitt eines Dokuments, der kein spezifischeres semantisches Element hat, um ihn darzustellen. Abschnitte sollten immer eine Überschrift haben, mit sehr wenigen Ausnahmen.

In diesem Artikel

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 Gliederungselement und sollte nur verwendet werden, wenn es kein spezifischeres Element gibt, um es darzustellen. Als Beispiel sollte ein Navigationsmenü in ein <nav>-Element eingebettet werden, aber eine Liste von Suchergebnissen oder eine Kartendarstellung und deren Steuerung 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 Einheit von Inhalten darstellt, die sinnvoll als eigenständiges Stück syndiziert werden kann (z.B. ein Blogbeitrag oder Blogkommentar oder ein Zeitungsartikel), wäre das <article>-Element die bessere Wahl.
Wenn die Inhalte nützliche, tangentiale Informationen darstellen, die zusammen mit dem Hauptinhalt funktionieren, aber nicht direkt dazu gehören (wie verwandte Links oder eine Autorenbiografie), verwenden Sie ein <aside>.
Wenn die Inhalte den Hauptinhaltsbereich eines Dokuments darstellen, verwenden Sie <main>.
Wenn Sie das Element nur als Styling-Wrapper verwenden, benutzen Sie stattdessen ein <div>.

Um es zu wiederholen, jedes <section> sollte identifiziert werden, typischerweise durch die Einbeziehung einer Überschrift (h1 - h6 Element) als Kind des <section>-Elements, wo immer möglich. Siehe unten für Beispiele, wo Sie ein <section> ohne Überschrift sehen könnten.

Beispiele

Beispiel für grundsätzliche Verwendung

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 Überschrift sehen könnten, sind typischerweise in Webanwendungen/UI-Abschnitten zu finden, nicht in traditionellen Dokumentstrukturen. In einem Dokument ergibt es keinen wirklichen Sinn, einen separaten Inhaltsabschnitt ohne eine Überschrift zu haben, um seinen Inhalt zu beschreiben. Solche Überschriften sind für alle Leser nützlich, insbesondere jedoch für Benutzer von unterstützenden Technologien wie Bildschirmlesegeräten, und sie sind auch gut für SEO.

Wenn Sie jedoch einen sekundären Navigationsmechanismus in Betracht ziehen, kann, wenn die globale Navigation bereits in ein <nav>-Element eingebettet ist, ein vorheriges/nächstes Menü in ein <section> eingebettet werden:

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

Oder was ist mit einer Art von Button-Leiste zur Steuerung Ihrer App? Dies möchte möglicherweise keine Überschrift, 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 die Einbeziehung einer Überschrift auch gut für SEO sein, daher ist es eine Überlegung wert.

Technische Zusammenfassung

Inhaltskategorien Erlaubte Inhalte Tag-Auslassung Erlaubte Eltern Implizierte ARIA-Rolle Erlaubte ARIA-Rollen DOM-Schnittstelle

Flussinhalt, Gliederungsinhalt, wahrnehmbarer Inhalt.

Flussinhalt.

Keine, sowohl der Start- als auch der End-Tag sind erforderlich.

Jedes Element, das Flussinhalt akzeptiert. Beachten Sie, dass ein <section>-Element kein Nachkomme eines <address>-Elements sein darf.

Region wenn das Element einen zugänglichen Namen hat, sonst generisch

alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel

[`HTMLElement`](/de/docs/Web/API/HTMLElement)

Andere abschnittsbezogene Elemente: <body>, <nav>, <article>, <aside>, h1, h2, h3, h4, h5, h6, <hgroup>, <header>, <footer>, <address>
Verwendung von HTML-Abschnitten und -Umrissen
ARIA: Region Rolle
Warum Sie HTML5 article über section wählen sollten, von Bruce Lawson

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

<section> HTML generisches Abschnitts-Element

In diesem Artikel

Probieren Sie es aus

Attribute

Verwendungshinweise

Beispiele

Beispiel für grundsätzliche Verwendung

Vorher

Nachher

Verwendung eines Abschnitts ohne Überschrift

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN