HTML <article> Tag

Zuletzt aktualisiert am
Samstag 14. Mai 2022

article html

Das Artikelelement ist die perfekte Gelegenheit für den Entwickler, einen Inhalt aufzunehmen, der vom Rest des Inhalts getrennt ist.

Definition und Verwendung

Das Tag <article> gibt unabhängige, eigenständige Inhalte an. Es kann ein Social-Media-Post, ein Benutzerkommentar, eine Nachrichtengeschichte oder sogar ein Blogbeitrag sein.

Drei Artikel mit unabhängigen, in sich geschlossenen Inhalten.

	<article>
  <a href="/html-section-tag">
    <h2>HTML <section> Tag</h2>
    <div>
      <time> 13. Mai 2022</time>
      <div>HTML</div>
    </div>
  </a>
</article>

<article>
  <a href="/html-lang">
    <h2>HTML lang Attribute</h2>
    <div>
      <time> 12. Mai 2022</time>
      <div>HTML</div>
    </div>
  </a>
</article>

<article>
  <a href="/html-audio-tag">
    <h2>HTML Audio Tag</h2>
    <div>
      <time> 11. Mai 2022</time>
      <div>HTML</div>
    </div>
  </a>
</article>
	

html article

Hinweis: Das <article> Element wird in einem Browser nicht als etwas Besonderes dargestellt.

Es ist wichtig zu wissen, dass, wenn wir einen Artikel mit langem Inhalt haben, wir Abschnitte innerhalb des Artikelelements verwenden können, um den Inhalt logisch zu unterbrechen.

	<!--article anfangen-->

<article>
  <h1>Hallo Welt</h1>
  <section>
    <h2>Hallo von California</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste?
    </p>
  </section>
  <section>
    <h2>Hallo von London</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste?
    </p>
  </section>
  <section>
    <h2>Hallo von Austria</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste?
    </p>
  </section>
</article>

<!--article ende-->
	

article

Wie Sie im obigen Beispiel sehen können, kann das Artikelelement viele Abschnittselemente enthalten.

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die das Element vollständig unterstützt.

Element Chrome Edge Mozilla Safari Opera
<article> 6.0 9.0 4.0 5.0 11.1

Hinweis Denken Sie daran, dass, wenn der Inhalt in sich geschlossen ist, Sie die Verwendung des Tags <article> bevorzugen. Sie können CSS verwenden, um das Element zu formatieren <article>.

Standard-CSS-Einstellungen

Die meisten Browser zeigen das Element <article> mit den folgenden Standardwerten an.

	article {
  display: block;
}
	
article
article tag html
html article tag
html article section
html5 article