<article>

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.

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>

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.

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.

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

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

• Apple Mail

  Teilweise

  Erkennt article als generischen Container, aber ohne semantische Bedeutung.

• Gmail

  Keine

  Gmail ignoriert semantische HTML5-Elemente und behandelt sie als unbekannte Tags.

• Outlook

  Keine

  Outlook (Word-Rendering) behandelt article als unbekanntes Element und kann das Layout brechen.

• Thunderbird

  Teilweise

  Rendert article als Block-Element, aber ohne semantische Unterstützung.

• Yahoo Mail

  Keine

  Yahoo Mail ignoriert semantische HTML5-Elemente.