article vs. section: Wann nutze ich was?

Kaum eine Frage zu semantischem HTML kommt so oft auf wie diese: <article> oder <section>? Beide gehören zu den Struktur-Elementen und wirken auf den ersten Blick austauschbar, stehen aber für unterschiedliche Bedeutungen. Die gute Nachricht: Mit zwei einfachen Prüffragen ist die Entscheidung fast immer eindeutig.

Die Kurzfassung

• <article> ist ein in sich abgeschlossener, eigenständig sinnvoller Inhalt – etwas, das man herauslösen und für sich allein verstehen oder weiter­ verbreiten könnte. Beispiele: ein Blogbeitrag, eine Produktkarte, ein Kommentar, eine Forumsnachricht.
• <section> ist ein thematischer Abschnitt innerhalb eines größeren Zusammenhangs, der für sich genommen nicht unbedingt eigenständig ist – und in der Regel eine Überschrift trägt.

Meine Prüffrage für <article>: Ergäbe dieser Inhalt auch außerhalb der Seite, zum Beispiel in einem Feedreader, noch Sinn? Wenn ja, ist <article> die richtige Wahl.

<article>: eigenständig und wiederverwendbar

Ein <article> steht für eine Einheit, die unabhängig funktioniert. Das klassische Beispiel ist der Blogbeitrag:

<article>
  <header>
    <h2>Mein erster Beitrag</h2>
    <p>Von Jakob Sommer · <time datetime="2026-06-26">26. Juni 2026</time></p>
  </header>
  <p>…</p>
  <footer>
    <p>Veröffentlicht unter: HTML</p>
  </footer>
</article>

Wichtig: <article> ist nicht auf „Artikel“ im journalistischen Sinn beschränkt. Auch eine einzelne Produktkachel in einer Liste oder ein einzelner Kommentar ist ein <article> – eben weil jeder Eintrag für sich steht. Mehrere gleichartige Artikel dürfen problemlos nebeneinanderstehen.

<section>: thematischer Abschnitt mit Überschrift

Eine <section> bündelt zusammengehörige Inhalte zu einem Thema. Sie ist Teil eines größeren Ganzen und braucht in aller Regel eine Überschrift, die das Thema benennt:

<section>
  <h2>Anfahrt</h2>
  <p>…</p>
</section>
<section>
  <h2>Öffnungszeiten</h2>
  <p>…</p>
</section>

Faustregel: Wenn du einen Abschnitt im Inhaltsverzeichnis der Seite aufführen würdest, ist <section> mit zugehöriger Überschrift passend.

Die beiden zusammen

<article> und <section> schließen sich nicht aus – sie verschachteln sich oft gegenseitig, je nach Bedeutung:

<!-- Ein langer Beitrag, in thematische Abschnitte gegliedert -->
<article>
  <h1>Großer Ratgeber</h1>

  <section>
    <h2>Grundlagen</h2>
    <p>…</p>
  </section>

  <section>
    <h2>Fortgeschrittene Techniken</h2>
    <p>…</p>
  </section>
</article>

<!-- Eine Übersicht (section), die mehrere eigenständige Beiträge (article) bündelt -->
<section>
  <h2>Neueste Beiträge</h2>

  <article>
    <h3>Beitrag A</h3>
    <p>…</p>
  </article>

  <article>
    <h3>Beitrag B</h3>
    <p>…</p>
  </article>
</section>

Welche Verschachtelung richtig ist, ergibt sich aus der Bedeutung: Ist der äußere Block eigenständig (der Ratgeber)? Dann <article> außen. Ist er nur eine thematische Gruppierung (die Beitragsliste)? Dann <section> außen.

Und wann keines von beiden?

Hier liegt der häufigste Fehler. <section> ist kein Ersatz für <div>. Greife zu <div>, wenn du nur einen Container zum Stylen oder Gruppieren brauchst, ohne dass ein eigenständiges Thema dahintersteht:

<!-- Falsch: section ohne Thema, nur fürs Layout -->
<section class="flex-row">…</section>

<!-- Richtig: div fürs reine Layout -->
<div class="flex-row">…</div>

Eine <section> ohne Überschrift ist fast immer ein Hinweis darauf, dass eigentlich ein <div> gemeint war. Ich prüfe das bei sehr „section-lastigem“ Code meist als Erstes.

Entscheidungshilfe

Häufige Fragen

Darf eine Seite mehrere <article> enthalten?

Ja. Eine Übersichtsseite mit mehreren Beiträgen oder Produkten enthält in der Regel mehrere <article>-Elemente nebeneinander.

Braucht jede <section> zwingend eine Überschrift?

Technisch ist sie nicht erzwungen, inhaltlich aber fast immer angebracht. Fehlt ein Thema und damit eine sinnvolle Überschrift, ist <div> die bessere Wahl.

Ist die Reihenfolge der Verschachtelung festgelegt?

Nein. <article> kann <section> enthalten und umgekehrt. Entscheidend ist allein, welcher Block eigenständig und welcher nur thematische Gruppierung ist.

Fazit

<article> steht für Eigenständigkeit, <section> für einen thematischen Abschnitt mit Überschrift, <div> für alles rein Strukturelle ohne eigene Bedeutung. Mit den beiden Prüffragen – eigenständig? und eigenes Thema mit Überschrift? – triffst du die Entscheidung zuverlässig. Wer hier sauber unterscheidet, vermeidet ganz nebenbei die typische „Div-Soup“.