<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.
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
<div>
<h2>Heading</h2>
<p>Bunch of awesome content</p>
</div>
Ergebnis
Nachher
<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:
<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:
<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 | Flussinhalt, Gliederungsinhalt, wahrnehmbarer Inhalt. |
|---|---|
| Erlaubte Inhalte | Flussinhalt. |
| Tag-Auslassung | Keine, sowohl der Start- als auch der End-Tag sind erforderlich. |
| 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, sonst
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
| Spezifikation |
|---|
| HTML # the-section-element |