W3docs
de
Anmelden

HTML <article>-Tag

The <article> tag is used to define logical blocks on a page. W3docs HTML tutorial explains how to use the HTML <article> tag with syntax, examples.

Das <article>-Tag ist eines der HTML5-Elemente. Es wird verwendet, um unabhängigen, eigenständigen Inhalt zu definieren. Ein Artikel sollte eine eigene Bedeutung haben und sich leicht vom Rest des Webseiteninhalts abgrenzen lassen.

Das <article>-Element kann Folgendes enthalten:

  • Blogeintrag
  • Forenbeitrag
  • Nachrichten
  • Kommentar

Wenn das <article>-Element verschachtelt ist, stellt das innere Element einen Artikel dar, der mit dem äußeren Element zusammenhängt.

Die Autoreninformationen des <article>-Elements können Sie mit dem <address>-Element angeben. Dies gilt für jedes <article>-Element unabhängig, einschließlich verschachtelter.

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

Sie können Überschriftenelemente (<h1> bis <h6>) innerhalb des <article>-Tags verwenden, um den Inhalt zu strukturieren. Jedes <article> kann mit einer eigenen <h1>-Überschrift beginnen.

Das Veröffentlichungsdatum und die Uhrzeit des <article>-Tags können mit einem <time>-Element mit einem datetime-Attribut beschrieben werden.

Syntax

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

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

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 article

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

Artikel über Blumen mit dem article-Tag | W3Docs

<!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 »

Attribute

Das <article>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.

So stylen Sie ein HTML <article>-Tag

article {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

Praxis

Übung

Welche Funktionalität hat das HTML &lt;article&gt;-Tag?