HTML `<article>`-Tag

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

html

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

Try it Yourself »

Ergebnis

Beispiel für article

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

Artikel über Blumen mit dem article-Tag | W3Docs

html

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

Try it Yourself »

Attribute

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

So stylen Sie ein HTML <article>-Tag

css

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

Praxis

Welche Funktionalität hat das HTML <article>-Tag?

Es definiert einen Abschnitt in einem Dokument.Es definiert einen HyperlinkEs gibt unabhängigen, eigenständigen Inhalt an.Es markiert den Anfang einer Webseite.Es wird verwendet, um Multimedia wie Audio, Video usw. in ein HTML-Dokument einzubetten.

HTML <article>-Tag ​

Syntax ​

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

Ergebnis ​

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

Attribute ​