<article>

Zuletzt aktualisiert am 5. Februar 2026

Das <article>-Element kennzeichnet einen eigenständigen, in sich geschlossenen Inhalt auf deiner Webseite. Es ist ideal für Blog-Posts, Nachrichten-Artikel, Kommentare oder Produktkarten – also alles, was auch außerhalb des Website-Kontexts noch Sinn ergibt.

Grundlagen

Das <article>-Element ist eines der wichtigsten semantischen HTML5-Elemente. Es markiert Inhalte, die für sich alleine stehen können und unabhängig vom Rest der Seite verständlich sind. Der “Zeitungstest” hilft bei der Entscheidung: Könnte man diesen Inhalt ausschneiden und woanders veröffentlichen, und würde er immer noch Sinn ergeben? Dann ist <article> die richtige Wahl.

Ein wichtiger Unterschied zu <section>: Während <section> eher thematische Gruppierungen innerhalb eines größeren Kontexts darstellt, steht <article> für eigenständige Inhaltseinheiten. Ein Blog-Post ist ein <article>, die einzelnen Abschnitte darin können <section>-Elemente sein.

Interessant ist auch, dass <article>-Elemente verschachtelt werden können. Ein typisches Beispiel sind Kommentare unter einem Blog-Post: Der Post selbst ist ein <article>, und jeder Kommentar darunter ist ebenfalls ein eigenständiges <article> innerhalb des Haupt-Articles.

Syntax

<article>
  <h2>Überschrift</h2>
  <p>Eigenständiger Inhalt...</p>
</article>

Beispiele

Blog-Post

Ein klassisches Beispiel für die Verwendung von <article> ist ein Blog-Post mit allen typischen Elementen wie Überschrift, Metadaten und Inhalt.

<article>
  <header>
    <h2>10 CSS-Tricks für Anfänger</h2>
    <p>
      <time datetime="2026-02-03">3. Februar 2026</time> von Mario
    </p>
  </header>
  <p>
    In diesem Artikel zeige ich dir meine Lieblings-CSS-Tricks, die jeder
    Einsteiger kennen sollte...
  </p>
  <footer>
    <p>Tags: CSS, Webentwicklung</p>
  </footer>
</article>

Kommentare (verschachtelte Articles)

Kommentare sind eigenständige Inhalte innerhalb eines Artikels und können daher als verschachtelte <article>-Elemente strukturiert werden.

<article>
  <h2>Mein Blog-Post</h2>
  <p>Der Hauptinhalt des Posts...</p>

  <section>
    <h3>Kommentare</h3>

    <article>
      <header>
        <p><strong>Anna</strong> am
        <time datetime="2026-02-03">3. Februar 2026</time></p>
      </header>
      <p>Super Artikel! Hat mir sehr geholfen.</p>
    </article>

    <article>
      <header>
        <p><strong>Tom</strong> am
        <time datetime="2026-02-03">3. Februar 2026</time></p>
      </header>
      <p>Danke für die Tipps!</p>
    </article>

  </section>
</article>

Produktkarte

Auch Produktkarten in einem Online-Shop sind eigenständige Inhalte und profitieren von der semantischen Auszeichnung mit <article>.

<article>
  <img src="produkt.jpg" alt="Produktfoto">
  <h3>Premium Kaffeetasse</h3>
  <p>Handgefertigte Keramik-Tasse mit elegantem Design.</p>
  <p><strong>29,99 €</strong></p>
  <button>In den Warenkorb</button>
</article>

Barrierefreiheit

Das <article>-Element hat die implizite ARIA-Rolle article, die Screenreadern signalisiert, dass es sich um einen eigenständigen Inhaltsbereich handelt. Screenreader-Nutzer können zwischen Articles navigieren, was die Orientierung auf der Seite deutlich verbessert.

Es ist empfehlenswert, jedem <article> eine aussagekräftige Überschrift zu geben, damit Screenreader-Nutzer schnell erfassen können, worum es in diesem Artikel geht. Die Überschrift sollte die Hauptaussage oder das Thema des Inhalts widerspiegeln.

Bei verschachtelten <article>-Elementen (wie bei Kommentaren) wird die Hierarchie-Ebene an den Screenreader kommuniziert, sodass Nutzer verstehen, dass ein Kommentar Teil eines übergeordneten Artikels ist.

Häufige Fehler

Article ohne eigenständigen Inhalt: Ein häufiger Fehler ist die Verwendung von <article> für Inhalte, die nicht wirklich eigenständig sind. Navigationselemente, Seitenleisten oder reine Layout-Container sind keine Articles. Frage dich immer: Würde dieser Inhalt außerhalb der Webseite noch Sinn ergeben?

Verwechslung mit Section: Viele Entwickler sind unsicher, wann sie <article> und wann <section> verwenden sollen. Die Faustregel: Wenn der Inhalt eigenständig ist und syndiziert werden könnte (RSS-Feed, Aggregator), nutze <article>. Wenn du nur thematische Abschnitte innerhalb eines größeren Inhalts gruppieren willst, ist <section> die bessere Wahl. Ein Blog-Post ist ein <article>, die Kapitel darin sind <section>-Elemente.

Fehlende Überschriften: Ein <article> sollte immer eine Überschrift enthalten, die den Inhalt beschreibt. Ohne Überschrift ist die semantische Struktur unvollständig und für Screenreader-Nutzer schwerer zu erfassen.

Überflüssige Verschachtelung: Nicht jeder Absatz oder jedes kleine Content-Stück braucht ein eigenes <article>-Element. Überlege dir gut, ob der Inhalt wirklich eigenständig ist oder ob ein einfacher <div> oder <section> ausreicht.

Browser-Kompatibilität

Das <article>-Element wird von allen modernen Browsern vollständig unterstützt. Die Unterstützung ist seit HTML5 standardmäßig vorhanden und umfasst alle gängigen Browser-Versionen der letzten Jahre.

Das article-Element wird von allen modernen Browsern vollständig unterstützt.

Email-Kompatibilität

Semantische HTML5-Elemente wie article werden von den meisten Email-Clients nicht korrekt interpretiert. Verwende stattdessen div-Container oder table-basierte Strukturen.

Verwandte Elemente