Inhalt gliedern: article und section

header, main und footer gliedern die Seite. Innerhalb des Hauptinhalts geht die Gliederung weiter, und dafür gibt es zwei Elemente, die oft verwechselt werden.

01 / 03article: etwas, das für sich steht

<main>
  <h1>Rezepte</h1>

  <article>
    <h2>Linsensuppe</h2>
    <p>Braucht 30 Minuten und hält drei Tage.</p>
  </article>

  <article>
    <h2>Ofengemüse</h2>
    <p>Alles auf ein Blech, fertig.</p>
  </article>
</main>

Ein article ist ein in sich geschlossener Inhalt. Der Test dafür: Ließe sich das woanders hinstellen, ohne dass etwas fehlt? Im Beispiel steht jedes Rezept in einem eigenen article, und genau so ist es: Man könnte ein einzelnes Rezept auf eine eigene Seite stellen, in einen Newsletter packen oder in einem RSS-Feed ausliefern, und es wäre weiterhin vollständig.

Der Name führt in die Irre. Ein article ist nicht nur ein Zeitungsartikel. Typisch sind auch: ein Blog-Post, ein Kommentar unter einem Beitrag, eine Produktkarte in einer Übersicht, ein Beitrag in einem Forum, eine Rezension. Ein Kommentar ist übrigens ein schönes Beispiel für Verschachtelung: Der article des Beitrags enthält weitere article für die Kommentare, denn auch ein Kommentar steht für sich.

02 / 03section: ein thematischer Abschnitt

<article>
  <h1>Linsensuppe</h1>

  <section>
    <h2>Zutaten</h2>
    <ul>
      <li>Linsen</li>
      <li>Suppengrün</li>
    </ul>
  </section>

  <section>
    <h2>Zubereitung</h2>
    <p>Gemüse schneiden, alles köcheln lassen.</p>
  </section>
</article>

Ein section gruppiert Inhalte, die thematisch zusammengehören, aber für sich genommen unvollständig wären. „Zutaten“ allein ist kein Rezept, es ist ein Kapitel davon.

Daraus folgt eine praktische Regel: Ein section braucht eine Überschrift. Wenn dir keine einfällt, ist es kein Abschnitt. Die Überschrift ist für deine Leser da und für die Gliederung der Seite. Für Screenreader zählt sie allerdings nicht als Name des Abschnitts: Damit die Hilfstechnik den Bereich beim Namen nennt und direkt anspringen lässt, musst du beides verknüpfen, mit <h2 id="zutaten"> und einem aria-labelledby="zutaten" am section. Ohne das ist ein section für sie dasselbe wie ein div.

Die Beziehung zwischen beiden ist nicht festgelegt: Ein article kann section enthalten (wie hier), und ein section kann article enthalten (etwa der Abschnitt „Neueste Beiträge“ mit mehreren Beiträgen darin).

03 / 03Wo es meistens schiefgeht

<section>
  <img src="/lernen/media/demo-600.jpg" alt="Ein Teller Linsensuppe" width="300" height="169">
  <p>Bildunterschrift</p>
</section>

<div class="bildkasten">
  <img src="/lernen/media/demo-600.jpg" alt="Ein Teller Linsensuppe" width="300" height="169">
  <p>Bildunterschrift</p>
</div>

Oben ein section, das nur ein Bild und eine Zeile Text zusammenhält. Keine Überschrift, kein Thema, nichts. Das ist kein Abschnitt, das ist Verpackung. Unten dasselbe als div, und das ist die richtige Wahl.

Der Reflex dahinter ist verständlich: section klingt moderner als div. Nur bringt es nichts: Ohne zugänglichen Namen behandelt die Hilfstechnik ein section genau wie ein div. Du hast dann ein Element geschrieben, das nach Struktur aussieht und keine ist.

Für dieses eine Beispiel gäbe es übrigens ein noch besseres Element als das div: figure mit figcaption, aus dem Abschnitt über Bilder.

Zusammengefasst: article wenn es für sich steht, section wenn es ein benanntes Kapitel ist, div wenn es nur zusammenhalten soll.