<article> HTML-Artikelinhalts-Element

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Das <article>-Element (HTML) repräsentiert eine eigenständige Komposition in einem Dokument, einer Seite, einer Anwendung oder einem Standort, die darauf ausgelegt ist, unabhängig vertrieben oder wiederverwendet zu werden (z. B. in der Syndikation). Beispiele hierfür sind: ein Forumspost, ein Magazin- oder Zeitungsartikel, ein Blogeintrag, eine Produktkarte, ein vom Benutzer eingereichter Kommentar, ein interaktives Widget oder Gadget oder ein beliebiger anderer unabhängiger Inhalt.

In diesem Artikel

Probieren Sie es aus

<article class="forecast">
  <h1>Weather forecast for Seattle</h1>
  <article class="day-forecast">
    <h2>03 March 2018</h2>
    <p>Rain.</p>
  </article>
  <article class="day-forecast">
    <h2>04 March 2018</h2>
    <p>Periods of rain.</p>
  </article>
  <article class="day-forecast">
    <h2>05 March 2018</h2>
    <p>Heavy rain.</p>
  </article>
</article>

.forecast {
  margin: 0;
  padding: 0.3rem;
  background-color: #eeeeee;
}

.forecast > h1,
.day-forecast {
  margin: 0.5rem;
  padding: 0.3rem;
  font-size: 1.2rem;
}

.day-forecast {
  background: right/contain content-box border-box no-repeat
    url("/shared-assets/images/examples/rain.svg") white;
}

.day-forecast > h2,
.day-forecast > p {
  margin: 0.2rem;
  font-size: 1rem;
}

Ein bestimmtes Dokument kann mehrere Artikel enthalten. Beispielsweise bei einem Blog, der den Text jedes Artikels nacheinander anzeigt, während der Leser scrollt, würde jeder Beitrag in einem <article>-Element enthalten sein, möglicherweise mit einem oder mehreren <section>-Elementen darin.

Attribute

Dieses Element enthält nur die globalen Attribute.

Verwendungshinweise

Jedes <article> sollte identifiziert werden, typischerweise durch das Einschließen einer Überschrift (<h1> - <h6>) als Kind des <article>-Elements.
Wenn ein <article>-Element verschachtelt ist, repräsentiert das innere Element einen Artikel, der mit dem äußeren Element in Verbindung steht. Beispielsweise können die Kommentare zu einem Blog-Eintrag <article>-Elemente sein, die im <article> des Blog-Eintrags verschachtelt sind.
Autorinformationen eines <article>-Elements können durch das <address>-Element bereitgestellt werden, sie gelten jedoch nicht für verschachtelte <article>-Elemente.
Das Veröffentlichungsdatum und die Uhrzeit eines <article>-Elements können mit dem datetime-Attribut eines <time>-Elements beschrieben werden.

Beispiele

html
<article class="film_review">
  <h2>Jurassic Park</h2>
  <section class="main_review">
    <h3>Review</h3>
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <h3>User reviews</h3>
    <article class="user_review">
      <h4>Too scary!</h4>
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <h4>Love the dinos!</h4>
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>