HTML <article> Tag

Das <article>-Tag ist eines der HTML5-Sektionselemente. Es definiert einen eigenständigen, in sich geschlossenen Inhalt — etwas, das auch für sich allein noch Sinn ergeben würde, wenn man es aus der Seite herausnähme und anderswo veröffentlichte. Eine gute Probe: Könnte der Inhalt in einen RSS-Feed syndiziert, als eigenständige Karte angezeigt oder auf einer anderen Website erneut veröffentlicht werden, ohne seine Bedeutung zu verlieren? Dann gehört er in ein <article>.

Typische Verwendungszwecke des <article>-Elements sind:

ein Blogbeitrag oder eine Nachrichtenmeldung
ein Forenbeitrag
eine Produktkarte in einer Übersicht
ein Nutzerkommentar oder eine Rezension
ein interaktives Widget oder Gadget

Warum das `<article>`-Element verwenden?

Das <article>-Element trägt eine Bedeutung, die ein generisches <div> nicht hat:

Barrierefreiheit. Wenn ein <article> einen zugänglichen Namen hat (zum Beispiel eine Überschrift, auf die via aria-labelledby verwiesen wird), machen assistive Technologien es als article-Landmark sichtbar. Screenreader-Nutzer können zwischen Artikeln springen, anstatt die gesamte Seite von oben nach unten zu lesen.
SEO und Semantik. Suchmaschinen und Lesewerkzeuge (wie der „Lesemodus" in Browsern) verwenden <article> als Signal für den zentralen, eigenständigen Inhaltsbereich und helfen dabei, den Primärtext eines Beitrags zu extrahieren.
Wartbarkeit. Das Markup beschreibt den Zweck des Inhalts, sodass CSS und JavaScript auf echte semantische Einheiten abzielen können, anstatt auf reine Stilhaken.

`<article>` vs. `<section>` vs. `<div>`

Diese drei Elemente werden leicht verwechselt. Folgende Faustregel hilft:

<article> — eigenständiger Inhalt, der unabhängig verteilt oder syndiziert werden könnte (ein Blogbeitrag, ein Kommentar, eine Produktkarte). Fragen Sie sich: „Könnte das auch woanders alleine stehen?" Wenn ja, verwenden Sie <article>.
<section> — eine thematische Gruppierung verwandter Inhalte innerhalb eines Dokuments, üblicherweise mit einer Überschrift (zum Beispiel „Kommentare" oder „Ähnliche Produkte"). Es ist Teil der Dokumentgliederung, soll aber nicht für sich allein stehen.
<div> — ein generischer Container ohne semantische Bedeutung. Verwenden Sie ihn nur, wenn kein anderes Element passt, typischerweise nur für Styling oder Layout.

Ein <article> und ein <section> können in beide Richtungen verschachtelt werden: Ein <section> kann mehrere <article>-Elemente gruppieren, und ein <article> kann <section>-Elemente enthalten, die seinen Inhalt unterteilen. Wenn <article>-Elemente verschachtelt sind, repräsentiert das innere inhaltlich etwas Zugehöriges zum äußeren — beispielsweise ein Kommentar innerhalb eines Blogbeitrags.

Aufbau eines `<article>`

Es gibt einige verwandte Elemente, mit denen ein <article> eine vollständige Struktur erhalten kann:

Überschriften-Elemente (<h1> bis <h6>), um den Inhalt zu betiteln und zu strukturieren. Jedes <article> kann mit seiner eigenen Überschrift beginnen.
Ein <header> für einleitende Inhalte wie Titel und Metadaten sowie ein <footer> für abschließende Inhalte.
Ein <address>-Element für Autorinformationen. Es gilt unabhängig für jedes <article>, auch für verschachtelte.
Ein <time>-Element mit einem datetime-Attribut, um das Veröffentlichungsdatum zu kennzeichnen.

In einem einzigen HTML-Dokument können mehrere <article>-Tags verwendet werden.

Syntax

Das <article>-Tag wird als Paar verwendet. Der Inhalt wird zwischen dem öffnenden (<article>) und dem schließenden (</article>) Tag geschrieben.

Beispiel für das HTML-`<article>`-Tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <article>
      <h1>Title of the article</h1>
      <p>Text of the article</p>
    </article>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel für das HTML-`<article>`-Tag im HTML-`<section>`-Tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Articles about flowers</h1>
      <article>
        <h2>Roses</h2>
        <p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
      </article>
      <article>
        <h2>Lilies</h2>
        <p> Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants. </p>
      </article>
    </section>
  </body>
</html>

Probier es selbst »

Beispiel einer Blog-Beitragskarte mit `<header>`, `<footer>`, `<time>` und `<address>`:

Dieses Beispiel zeigt einen realistischen, eigenständigen Blogbeitrag: Ein <header> enthält Titel und Veröffentlichungsdatum, ein <address> gibt den Autor an, und ein <footer> schließt den Beitrag ab.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <article>
      <header>
        <h2>How to Grow Roses</h2>
        <p>
          Published on
          <time datetime="2026-06-17">June 17, 2026</time>
        </p>
      </header>
      <p>Rose – the queen of flowers – is the object of worship and ardent love. With a little care, anyone can grow healthy, fragrant roses at home.</p>
      <footer>
        <p>Written by
          <address>
            <a href="mailto:[email protected]">Jane Doe</a>
          </address>
        </p>
      </footer>
    </article>
  </body>
</html>

Result

Attribute

Das <article>-Tag hat keine eigenen speziellen Attribute. Es unterstützt die Globalen Attribute und die Ereignis-Attribute.

Das `<article>`-Element gestalten

Standardmäßig ist <article> ein Block-Level-Element ohne visuelle Gestaltung und sieht daher genauso aus wie ein einfaches <div>. Das Erscheinungsbild fügen Sie selbst mit CSS hinzu. Die folgende Regel versieht jeden Artikel mit einem Rahmen, Innenabstand und Abständen, sodass Karten visuell voneinander getrennt sind:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      article {
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <article>
      <h2>Roses</h2>
      <p>Rose – the queen of flowers – is the object of worship and ardent love.</p>
    </article>
    <article>
      <h2>Lilies</h2>
      <p>Lily – an amazing beauty flower, one of the most ancient bulbous plants.</p>
    </article>
  </body>
</html>

Barrierefreiheit und ARIA

Das <article>-Element hat eine implizite ARIA-Rolle article, daher müssen Sie in der Regel nicht selbst role="article" hinzufügen. Um es zu einem navigierbaren Landmark zu machen, das Screenreader auflisten und anspringen können, geben Sie ihm einen zugänglichen Namen — am häufigsten, indem Sie aria-labelledby auf die enthaltene Überschrift zeigen:

<article aria-labelledby="post-title">
  <h2 id="post-title">How to Grow Roses</h2>
  <p>Roses reward patient gardeners with fragrant, long-lasting blooms.</p>
</article>

Verwandte Sektionselemente, die gut mit <article> kombiniert werden können, sind <section> für thematische Gruppen, <aside> für inhaltlich tangential verwandte Inhalte (wie eine Seitenleiste) sowie <header> und <footer> für einleitende und abschließende Inhalte. Eine vollständige Übersicht finden Sie unter HTML5-Sektionselemente.

Übung

Was repräsentiert das HTML article-Element?

Eine thematische Gruppierung verwandter Inhalte innerhalb eines Dokuments.Ein Hyperlink zu einer anderen Seite.Eigenständige, in sich geschlossene Inhalte, die für sich allein verbreitet werden könnten.Den Beginn einer Webseite.Eingebettete Multimedia-Inhalte wie Audio oder Video.

Warum das <article>-Element verwenden?

<article> vs. <section> vs. <div>

Aufbau eines <article>