Zum Inhalt springen

article-Element

Männliche Person, frontal, schaut in die Kamera; trägt kariertes Hemd über dunkelfarbigem T‑Shirt; heller Innenraum mit unscharfem Monitor oder Poster links und Fenster rechts.

von Richard Albrecht am 18.10.2026

Das article-Element steht für einen Inhalt, der für sich allein stehen könnte: ein Blogbeitrag, eine Produktbeschreibung, ein Kommentar. Die Probe ist einfach: Ergibt der Inhalt woanders noch Sinn?

article-Element

Bereich mit einem in sich geschlossenen Inhalt, der unabhängig von seiner Umgebung verständlich bleibt.
Beispiel: „Ein article-Element eignet sich für alles, was man einzeln weitergeben könnte.“

Die Probe

Die Spezifikation beschreibt es als a complete, or self-contained, composition. Die Prüffrage lautet: Ergibt der Inhalt noch Sinn, wenn er allein in einem Nachrichtenleser auftaucht? Ein Blogbeitrag schon, ein Absatz aus der Mitte eines Textes nicht.

Deshalb passt es auch für Dinge, die man zunächst nicht als Artikel sieht: eine Produktkarte in einer Übersicht, eine Stellenanzeige, ein einzelner Kommentar unter einem Beitrag.

Verschachtelung ist erlaubt

Ein Kommentar zu einem Beitrag ist selbst in sich geschlossen und darf als article im article stehen. Das innere gehört dann inhaltlich zum äußeren.

<article>
  <h2>Website-Relaunch planen</h2>
  <p>…</p>
  <article>
    <h3>Kommentar von Anna</h3>
    <p>…</p>
  </article>
</article>

Abgrenzung zur section

Beide gliedern, aber aus verschiedenen Gründen. Die section fasst einen thematischen Abschnitt innerhalb eines Ganzen zusammen, der article ein Ganzes für sich. Im Zweifel hilft die Frage nach dem Weitergeben.

Siehe auch:

Sektion (Content-Bereich)

Abgegrenzter Abschnitt im Inhaltsbereich einer Seite, der ein Thema zusammenhält.

#Website-Struktur #Frontend-Entwicklung (HTML, CSS, JavaScript)

main-Element

Der Inhalt, für den die Seite da ist.

#Frontend-Entwicklung (HTML, CSS, JavaScript)

Header

Oberer Bereich einer Seite, der sich auf allen Seiten einer Website wiederholt und Logo und Hauptnavigation trägt.

#Website-Struktur #Frontend-Entwicklung (HTML, CSS, JavaScript)

Semantisches HTML

Elemente nach ihrer Bedeutung wählen statt nach ihrem Aussehen.

#Frontend-Entwicklung (HTML, CSS, JavaScript)

aside-Element

Inhalt, der mit dem Umgebenden nur lose zu tun hat.

#Frontend-Entwicklung (HTML, CSS, JavaScript)