HTML-<article> Tag

Definition und Verwendung

<article> Der Tag definiert ein unabhängiges, selbstinhaltiges Inhalt.

Ein Artikel sollte unabhängig lesbar sein und unabhängig vom gesamten Site verteilt werden können.

<articel> Mögliche Quellen für das Element sind:

  • Forenbeiträge
  • Blogbeiträge
  • Nachrichtenberichte
  • Benutzerkommentare

Hinweis:Im Browser:<article> Elemente selbst stellen keine speziellen Stile dar. Sie können jedoch mit CSS stilisiert werden <article> Elemente (siehe untenstehende Beispiele).

Siehe auch:

HTML DOM Referenzhandbuch:Article-Objekt

Beispiel

Beispiel 1

Drei eigenständige, in sich abgeschlossene Artikel:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome ist ein von Google entwickelter Webbrowser, der 2008 veröffentlicht wurde. Chrome ist der beliebteste Webbrowser der Welt!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox ist ein Open-Source-Webbrowser, der von Mozilla entwickelt wurde. Seit Januar 2018 ist Firefox der zweitbeliebteste Webbrowser.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge ist ein Webbrowser, der von Microsoft entwickelt wurde und 2015 veröffentlicht wurde. Microsoft Edge hat Internet Explorer abgelöst.</p>
</article>

Probieren Sie es selbst aus

Beispiel 2

Stellen Sie mit CSS das Styling des <article>-Elements ein:

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
  <h1>Beliebteste Browser</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome ist ein von Google entwickelter Webbrowser, der 2008 veröffentlicht wurde. Chrome ist der beliebteste Webbrowser der Welt!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox ist ein Open-Source-Webbrowser, der von Mozilla entwickelt wurde. Seit Januar 2018 ist Firefox der zweitbeliebteste Webbrowser.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge ist ein Webbrowser, der von Microsoft entwickelt wurde und 2015 veröffentlicht wurde. Microsoft Edge hat Internet Explorer abgelöst.</p>
  </article>
</article>
</body>
</html>

Probieren Sie es selbst aus

Globale Attribute

<article> Der Tag unterstützt auch Globale Attribute in HTML.

Ereignisattribute

<article> Der Tag unterstützt auch Ereignisattribute in HTML.

Standardmäßige CSS-Einstellungen

Die meisten Browser verwenden folgende Standardwerte zur Anzeige <article> Element:

article {
  display: block;
}

Browserkompatibilität

Die Zahlen in der Tabelle weisen auf die erste Version des Browsers hin, die diesen Element unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1