Ausführbare HTML-Docs: HTML section

Wofür das section-Tag da ist

<section> gruppiert Inhalt zu einem Thema und beginnt mit einer Überschrift, die dieses Thema benennt. Eine Landingpage, die in „Features“, „Pricing“ und „FAQ“ aufgeteilt ist, ist ein Paradebeispiel:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { border: 2px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    section h2 { color: #2563eb; }
  </style>
</head>
<body>
  <h1>Acme Notes</h1>
  <section>
    <h2>Features</h2>
    <p>Sync, search and share your notes.</p>
  </section>
  <section>
    <h2>Pricing</h2>
    <p>Free for personal use.</p>
  </section>
  <section>
    <h2>FAQ</h2>
    <p>Answers to common questions.</p>
  </section>
</body>
</html>

Jeder Abschnitt ist ein Kapitel der Seite, und jede Überschrift ist eine Zeile im Inhaltsverzeichnis der Seite. Wie die anderen semantischen Tags hat <section> kein Standardstyling; die Rahmen kommen aus dem CSS.

section vs. article vs. div

Auf dem Bildschirm sehen die drei gleich aus. Der Unterschied liegt darin, was sie über den Inhalt sagen:

Element	Bedeutet	Test
`<article>`	Ein vollständiges, eigenständiges Stück	Ergäbe es allein veröffentlicht Sinn, auf einer anderen Website oder in einem Feed?
`<section>`	Ein thematischer Teil eines größeren Ganzen	Hat es eine Überschrift (oder braucht eine), und ist es ein Kapitel von etwas?
`<div>`	Nichts: ein Kasten für Styling oder Layout	Ist es nur für CSS oder JavaScript da?

Blogbeiträge, Forenkommentare, Nachrichtenmeldungen und Produktkarten sind Artikel. „Features“, „Kapitel 2“ und „Ähnliche Produkte“ sind Abschnitte. Eine Flex-Reihe, die drei Karten nebeneinanderstellt, ist ein div.

Artikel in einem Abschnitt

Die beiden lassen sich in beide Richtungen verschachteln. Hier enthält ein Abschnitt „Latest posts“ mehrere unabhängige Artikel:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Section of articles</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .grid { display: flex; gap: 10px; }
    article { flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 12px; }
    article h3 { margin: 10px 0 4px; font-size: 16px; }
    article p { color: #6b7280; font-size: 14px; }
  </style>
</head>
<body>
  <section>
    <h2>Latest posts</h2>
    <div class="grid">
      <article>
        <h3>Flexbox in 5 minutes</h3>
        <p>Rows, columns and gaps.</p>
      </article>
      <article>
        <h3>CSS Grid basics</h3>
        <p>Two-dimensional layout.</p>
      </article>
      <article>
        <h3>Forms that work</h3>
        <p>Labels and validation.</p>
      </article>
    </div>
  </section>
</body>
</html>

Beachte das <div class="grid">: Es existiert nur, um die Karten in einer Reihe anzuordnen, ein div ist also das richtige Tag dafür. Jede Karte ist ein Artikel, weil jeder Beitrag für sich allein steht.

Abschnitte in einem Artikel

Ein langer Artikel kann in Abschnitte geteilt werden, genau wie ein Buch in Kapitel. Die Überschriftenebenen setzen die Überschrift des Artikels fort:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article with sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #2563eb; border-radius: 8px; padding: 0 14px; }
    section { border-inline-start: 4px solid #16a34a; padding-inline-start: 10px; margin-bottom: 12px; }
    section h3 { margin: 4px 0; }
  </style>
</head>
<body>
  <article>
    <h2>A beginner's guide to bread</h2>
    <section>
      <h3>Ingredients</h3>
      <p>Flour, water, salt, yeast.</p>
    </section>
    <section>
      <h3>Method</h3>
      <p>Mix, knead, rise, bake.</p>
    </section>
  </article>
</body>
</html>

Der blaue Kasten ist der Artikel (die ganze Anleitung), die grünen Balken sind seine Abschnitte. Gib einem Abschnitt seine eigene Überschriftenebene: Ein Artikel mit h2 enthält Abschnitte mit h3.

Benannte Abschnitte werden zu Landmarks

Screenreader führen bestimmte Elemente als Landmarks auf, zwischen denen Nutzer springen können. Eine <section> wird nur dann zur Landmark region, wenn sie einen zugänglichen Namen hat. Lass aria-labelledby auf ihre Überschrift zeigen:

<section aria-labelledby="pricing-title">
  <h2 id="pricing-title">Pricing</h2>
  ...
</section>

Mach das bei den wenigen Abschnitten, zu denen ein Nutzer direkt springen wollen würde, nicht bei jedem: Eine Seite mit zwanzig Landmarks ist so schwer zu überblicken wie eine ohne. Abschnitte ohne Namen helfen trotzdem, weil ihre Überschriften in der Überschriftenliste des Screenreaders auftauchen.

Abschnitte eignen sich auch gut als Ziele für Links innerhalb der Seite. Gib einem eine id, und ein Link mit href="#id" springt dorthin:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Jump links</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { min-height: 420px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <p><a href="#faq">Jump to the FAQ</a></p>
  <section id="features" aria-labelledby="features-title">
    <h2 id="features-title">Features</h2>
  </section>
  <section id="faq" aria-labelledby="faq-title">
    <h2 id="faq-title">FAQ</h2>
    <p><a href="#features">Back to features</a></p>
  </section>
</body>
</html>

Häufige Fehler

<section> als Wrapper zum Stylen verwenden. Wenn es keine Überschrift und kein Thema gibt, nimm <div>. Die Seite zu semantischem HTML zeigt, wohin welches Layout-Tag gehört.
Einen einzelnen Blogbeitrag in <section> packen. Ein Beitrag, der für sich allein steht, ist ein <article>.
Abschnitte ohne Überschriften. Füg eine Überschrift hinzu, notfalls eine optisch versteckte, oder überleg noch einmal, ob es ein Abschnitt ist.
<main> durch <section> ersetzen. Der Hauptinhalt der Seite kommt in <main>; Abschnitte kommen da hinein.
Jeden Abschnitt benennen. Füg aria-labelledby nur den wichtigen hinzu, damit die Liste der Landmarks kurz bleibt.

Häufig gestellte Fragen

Was ist das section-Tag in HTML?

<section> gruppiert Inhalt, der zu einem Thema gehört, etwa ein Kapitel eines Dokuments oder den Teil „Preise“ einer Landingpage. Es sollte normalerweise mit einer Überschrift beginnen, die sagt, worum es in dem Abschnitt geht.

Was ist der Unterschied zwischen section und div?

<section> sagt, dass der Inhalt ein thematischer Teil des Dokuments mit eigener Überschrift ist. <div> sagt nichts; es ist ein Kasten für Styling oder Layout. Wenn du nur einen Wrapper für CSS brauchst, nimm <div>.

Was ist der Unterschied zwischen section und article?

<article> ist Inhalt, der für sich allein Sinn ergibt, auch außerhalb der Seite: ein Blogbeitrag, ein Kommentar, eine Produktkarte. <section> ist ein Teil von etwas Größerem, der nur in seinem Zusammenhang Sinn ergibt. Frag dich, ob du das Stück allein veröffentlichen könntest: Wenn ja, ist es ein Artikel.

Kann ein article sections enthalten und eine section articles?

Ja, beides. Ein langer Artikel kann in Abschnitte geteilt werden, und ein Abschnitt wie „Neueste Beiträge“ kann eine Liste von Artikeln enthalten.

Braucht eine section eine Überschrift?

Fast immer, denn die Überschrift benennt das Thema. Wenn dir keine Überschrift dafür einfällt, ist der Inhalt wahrscheinlich kein Abschnitt, und ein <div> passt besser.

Verwandte Konzepte