article vs. section: Wann nutze ich was?

<article> verwendest du für Inhalte, die in sich abgeschlossen sind und auch außerhalb der Seite für sich allein Sinn ergeben – etwa einen Blogbeitrag, einen Kommentar oder eine Produktkarte. <section> kennzeichnet dagegen einen thematischen Abschnitt innerhalb eines größeren Ganzen und trägt dafür in aller Regel eine eigene Überschrift.

Kaum eine Frage zu semantischem HTML kommt so oft auf wie diese. Beide gehören zu den Struktur-Elementen und wirken auf den ersten Blick austauschbar – dabei stehen sie für unterschiedliche Bedeutungen und werden auch von Screenreadern unterschiedlich behandelt. Auf dieser Seite findest du die Kurzregel, den Blick in die Spezifikation, das Accessibility-Mapping beider Elemente, reale Beispiele vom Kommentarbereich bis zum Widget und einen Entscheidungsbaum für den Alltag.

Das Wichtigste in Kürze

• <article> ist ein in sich abgeschlossener, eigenständig sinnvoller Inhalt – etwas, das man herauslösen und für sich allein verstehen oder weiterverbreiten 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.
• Die Prüffrage für <article>: Ergäbe dieser Inhalt auch außerhalb der Seite, etwa in einem Feedreader, noch Sinn? Wenn ja, ist <article> richtig.
• Rollen im Accessibility Tree: <article> hat immer die Rolle article. <section> wird nur mit zugänglichem Namen zur Rolle region – ohne aria-label oder aria-labelledby bleibt es generic.
• Beide dürfen einander enthalten, in jeder Richtung: ein <article> mit <section>-Abschnitten, eine <section> mit mehreren <article>-Karten.
• Beide brauchen praktisch immer eine eigene Überschrift. Fehlt ein Thema und damit die Überschrift, ist ein <div> die richtige Wahl – siehe div vs. span.
• Kein SEO-Ranking-Signal. Google hat nie bestätigt, dass eines der beiden Elemente ins Ranking einfließt. Der Nutzen liegt in Bedienbarkeit und maschineller Auswertbarkeit.
• WCAG-Bezug: 1.3.1 Info und Beziehungen (Stufe A) verlangt, dass visuell erkennbare Gruppierungen programmatisch bestimmbar sind.

Was die HTML-Spezifikation sagt

Ein Blick in den HTML Living Standard lohnt sich, weil die Spezifikation die Frage direkt beantwortet – sie enthält sogar einen eigenen Abschnitt „Article or section?“ samt Vergleichstabelle. Sinngemäß:

• <article> steht für eine vollständige, in sich abgeschlossene Komposition, die grundsätzlich unabhängig verbreitet oder wiederverwendet werden könnte. Als Beispiele nennt die Spezifikation ausdrücklich: Forumsbeitrag, Zeitungs- oder Magazinartikel, Blogeintrag, Produktkarte, Nutzerkommentar und sogar ein interaktives Widget.
• <section> ist ein generischer Abschnitt eines Dokuments oder einer Anwendung – eine thematische Gruppierung von Inhalten, typischerweise mit Überschrift.

Zwei Faustregeln der Spezifikation finde ich besonders hilfreich. Erstens: Eine <section> ist nur dann angebracht, wenn ihr Inhalt in einem gedachten Inhaltsverzeichnis der Seite auftauchen würde. Zweitens: <section> ist das generischste der semantischen Gliederungselemente – bevor du es einsetzt, prüfe, ob ein spezifischeres Element passt: <nav> für Navigation, <aside> für Randinhalte, <main> für den Hauptinhaltsbereich.

<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, ein einzelner Kommentar oder ein Wetter-Widget ist ein <article> – eben weil jeder Eintrag für sich steht. Mehrere gleichartige Artikel dürfen problemlos nebeneinanderstehen, und jedes <article> sollte eine eigene Überschrift (<h2> bis <h6> an passender Stelle der Hierarchie) mitbringen.

<article> darf außerdem in sich selbst verschachtelt werden: Ein inneres <article> gilt dann als inhaltlich mit dem äußeren verwandt. Genau so bildet man Kommentare unter einem Blogbeitrag ab – dazu unten mehr.

<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. Typische Kandidaten sind Kapitel eines langen Textes, eine Ergebnisliste einer Suche oder ein Kartenausschnitt mit seinen Bedienelementen – Inhalte also, für die es kein spezifischeres Element wie <nav> oder <aside> gibt.

Was Screenreader daraus machen

Der Unterschied zwischen beiden Elementen ist nicht nur akademisch – er landet direkt im Accessibility Tree, also in dem, was assistive Technologien von deiner Seite sehen:

Die wichtigste Konsequenz: Eine nackte <section> ist für Screenreader-Nutzer unsichtbar. Erst ein zugänglicher Name macht daraus eine region, die in der Landmark-Navigation auftaucht. Eine Überschrift im Inneren reicht dafür allein nicht aus – der Name muss explizit vergeben werden, am besten per aria-labelledby auf die ohnehin sichtbare Überschrift:

<!-- Empfohlen: die sichtbare Überschrift als Name referenzieren -->
<section aria-labelledby="faq-titel">
  <h2 id="faq-titel">Häufige Fragen</h2>
  <p>…</p>
</section>

<!-- Nur wenn es keine sichtbare Überschrift gibt: aria-label -->
<section aria-label="Kurzzusammenfassung">
  <p>…</p>
</section>

aria-labelledby hat den Vorteil, dass sichtbarer Text und zugänglicher Name nie auseinanderlaufen können. Ein zusätzliches role="region" ist dabei überflüssig – die Rolle ergibt sich implizit aus dem benannten <section>.

Randnotiz – Regionen sind kein Selbstzweck. Es ist verlockend, jeder <section> ein aria-label zu verpassen. Bitte nicht: Jede benannte Region landet in der Landmark-Liste der Screenreader, und zwanzig Landmarks pro Seite sind so nützlich wie gar keine. Benenne nur Bereiche, die so wichtig sind, dass jemand gezielt zu ihnen springen möchte – der Rest bleibt eine schlichte <section> oder wird gleich ein <div>.

Auf <article> solltest du dich umgekehrt nicht als Accessibility-Feature verlassen: Da NVDA und Narrator es standardmäßig nicht ankündigen, ist es ein Bonus-Signal, kein Ersatz für eine saubere Überschriftenstruktur. Wie sich Screenreader-Nutzer tatsächlich durch Seiten bewegen – überwiegend per Überschriften- und Landmark-Sprüngen – habe ich in den verlinkten Grundlagen beschrieben.

Feedreader und Reader-Modus: die Praxisprobe

Mein Feedreader-Test ist mehr als eine Eselsbrücke. <article> ist genau das Element, das Maschinen signalisiert: „Hier beginnt eine eigenständige Inhaltseinheit.“ Apple hat etwa für den Reader-Modus der Apple Watch dokumentiert, dass <article> hilft, den Hauptinhalt einer Seite zu identifizieren und für die Darstellung aufzubereiten. Reader-Modi in Browsern arbeiten heuristisch – ein korrekt gesetztes <article> ist eines der Signale, an denen sie sich orientieren können.

Ein Punkt gehört dazu: Einen belegten, direkten Ranking-Vorteil bei Suchmaschinen gibt es weder für <article> noch für <section>. Der Gewinn liegt in der Maschinenlesbarkeit und Zugänglichkeit – und die zahlt langfristig auch auf die Auffindbarkeit ein.

Überschriften innerhalb von article und section

Beide Elemente leben von Überschriften: Jedes <article> sollte eine haben, jede <section> sowieso. Wichtig ist, dass die Überschriften-Hierarchie dabei durchgehend stimmt – also echte <h2>, <h3> und so weiter, passend zur Verschachtelungstiefe.

Hintergrund: HTML5 sah ursprünglich einen Outline-Algorithmus vor, bei dem man überall <h1> schreiben könnte und die Ebene sich aus der Verschachtelung in <section> und <article> ergeben sollte. Dieser Algorithmus wurde von keinem Browser je implementiert und ist inzwischen aus der Spezifikation gestrichen. Verschachtelte <h1> sehen zwar visuell kleiner aus, bleiben im Accessibility Tree aber Ebene 1 – für Screenreader-Nutzer wirkt die Seite dann wie ein Dokument aus lauter Hauptüberschriften. Das ist kein Randproblem: In einer WebAIM-Umfrage unter Screenreader-Nutzern gaben 86,1 % an, dass Überschriftenebenen für sie sehr oder einigermaßen nützlich sind.

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.

Drei Beispiele aus der Praxis

Kommentarbereich unter einem Blogbeitrag

Der Klassiker kombiniert gleich alles: Der Beitrag ist ein <article>, der Kommentarbereich eine benannte <section> darin, und jeder einzelne Kommentar wieder ein <article> – denn jeder Kommentar ergäbe auch für sich (etwa in einer Benachrichtigungs-Mail) noch Sinn:

<article>
  <h1>Warum semantisches HTML sich lohnt</h1>
  <p>…</p>

  <section aria-labelledby="kommentare-titel">
    <h2 id="kommentare-titel">Kommentare</h2>

    <article>
      <h3>Anna schreibt:</h3>
      <p>Toller Beitrag, danke!</p>
    </article>

    <article>
      <h3>Ben schreibt:</h3>
      <p>Eine Frage zur Verschachtelung …</p>
    </article>
  </section>
</article>

Die inneren <article> gelten laut Spezifikation als inhaltlich mit dem äußeren verwandt – genau die Semantik, die Kommentare haben.

Produktkarten in einer Übersicht

Jede Produktkachel ist eine abgeschlossene Einheit mit Name, Preis und Link – also ein <article>, gebündelt in einer thematischen <section>:

<section aria-labelledby="bestseller-titel">
  <h2 id="bestseller-titel">Unsere Bestseller</h2>

  <article>
    <h3>Kaffeemühle „Modell A“</h3>
    <p>49 €</p>
    <a href="/produkte/kaffeemuehle-a.html">Zum Produkt</a>
  </article>

  <article>
    <h3>Handfilter „Modell B“</h3>
    <p>19 €</p>
    <a href="/produkte/handfilter-b.html">Zum Produkt</a>
  </article>
</section>

Wie du solche Kacheln komplett klickbar machst, ohne die Zugänglichkeit zu ruinieren, zeige ich unter klickbare Cards.

Ein eigenständiges Widget

Überraschend für viele: Auch ein Widget – etwa eine Wetteranzeige im Dashboard – nennt die Spezifikation ausdrücklich als <article>-Anwendungsfall. Der Test funktioniert auch hier: Das Widget wäre in jedem anderen Kontext (andere Seite, App, Startbildschirm) genauso sinnvoll.

<article>
  <h2>Wetter in Köln</h2>
  <p>18 °C, bewölkt · Regen ab 16 Uhr</p>
</article>

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.

Entscheidungsbaum in Textform

So gehe ich die Entscheidung Schritt für Schritt durch:

1. Brauchst du den Container nur für CSS oder JavaScript, ohne inhaltliche Bedeutung? → <div>. Fertig.
2. Passt ein spezifischeres Element? Navigation → <nav>, ergänzender Randinhalt → <aside>, Hauptinhaltsbereich der Seite → <main>.
3. Ist der Inhalt für sich allein sinnvoll – könnte er in einem Feed, einer Mail oder auf einer anderen Seite eigenständig stehen? → <article>.
4. Ist es ein thematischer Abschnitt mit eigener Überschrift, der in einem Inhaltsverzeichnis der Seite auftauchen würde? → <section> – und wenn der Bereich wichtig genug für die Landmark-Navigation ist, benenne ihn per aria-labelledby.
5. Nichts davon trifft zu? → Zurück zu <div>.

Entscheidungshilfe

Häufige Fehler

• <section> als schickerer <div>. Wer jede Layout-Box als <section> auszeichnet, erzeugt Pseudo-Semantik ohne Nutzen. Ohne Thema und Überschrift ist <div> die passendere Wahl.
• <section> ohne Überschrift. Technisch erlaubt, inhaltlich fast immer ein Zeichen, dass entweder die Überschrift fehlt oder das Element falsch gewählt ist.
• Jede <section> mit aria-label zur Region aufblasen. Zu viele benannte Regionen verstopfen die Landmark-Navigation. Nur wichtige Bereiche benennen.
• role="region" oder role="article" zusätzlich setzen. Die Rollen ergeben sich implizit aus den Elementen – redundante ARIA-Attribute sind bestenfalls überflüssig.
• Sich auf den Outline-Algorithmus verlassen. Überall <h1> zu schreiben und auf automatische Ebenen zu hoffen funktioniert in keinem Browser. Immer echte Überschriftenebenen verwenden.
• <article> für alles, was wie eine Karte aussieht. Ein Hero-Banner oder ein reiner Deko-Teaser ist nicht eigenständig verbreitbar – der Feedreader-Test schlägt fehl, also kein <article>.

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. Auch Verschachtelung ist erlaubt: Innere <article> (etwa Kommentare) gelten als inhaltlich mit dem äußeren verwandt.

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.

Wird eine <section> von Screenreadern angekündigt?

Nur, wenn sie einen zugänglichen Namen hat – dann bekommt sie die Rolle region und taucht in der Landmark-Navigation auf. Ohne Namen (per aria-labelledby oder aria-label) ist sie für Screenreader so neutral wie ein <div>.

Bringen <article> und <section> etwas für SEO?

Einen nachgewiesenen, direkten Ranking-Vorteil gibt es nicht. Die Elemente verbessern die Maschinenlesbarkeit – etwa für Reader-Modi und assistive Technologien – und eine saubere Struktur mit korrekten Überschriften hilft Suchmaschinen beim Verstehen der Seite. Wunder sollte man davon aber nicht erwarten.

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. Denk für die Zugänglichkeit an die zweite Ebene: Ein <article> bringt seine Rolle von selbst mit, eine <section> wird erst mit aria-labelledby zur navigierbaren Region. Wer hier sauber unterscheidet, vermeidet ganz nebenbei die typische „Div-Soup“.

Quellen

• HTML Living Standard: Sections (WHATWG – Definitionen von article und section samt Vergleich „Article or section?“)
• Das section-Element (MDN – implizite ARIA-Rolle region bzw. generic, Abgrenzung zu article und div)
• Das article-Element (MDN – Anwendungsfälle und Verschachtelungsregeln)
• „article vs. section: How To Choose The Right One“ (Smashing Magazine – Screenreader-Verhalten beider Elemente im Detail)