<article>: Das Artikel-Element für Inhalte

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <article> HTML Element repräsentiert eine in sich geschlossene Komposition in einem Dokument, einer Seite, einer Anwendung oder auf einer Website, die dazu bestimmt ist, unabhängig verteilt oder wiederverwendet zu werden (z. B. in Syndikation). Beispiele umfassen: einen Forumsbeitrag, einen Magazin- oder Zeitungsartikel, einen Blogbeitrag, eine Produktkarte, einen vom Benutzer übermittelten Kommentar, ein interaktives Widget oder Gadget oder jedes andere unabhängige Inhaltselement.

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: #eee;
}

.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 gegebenes Dokument kann mehrere Artikel enthalten; zum Beispiel auf einem Blog, der die Texte der einzelnen Artikel nacheinander anzeigt, während der Leser scrollt. Jeder Beitrag würde in einem <article>-Element enthalten sein, möglicherweise mit einem oder mehreren <section>s darin.

Attribute

Dieses Element enthält nur die globalen Attribute.

Verwendungshinweise

  • Jedes <article> sollte identifiziert werden, typischerweise durch Einschließen einer Überschrift (<h1> - <h6> Element) als Kindelement des <article> Elements.
  • Wenn ein <article> Element verschachtelt ist, repräsentiert das innere Element einen Artikel, der im Zusammenhang mit dem äußeren Element steht. Zum Beispiel können die Kommentare eines Blogbeitrags <article>-Elemente sein, die in dem <article>, das den Blogbeitrag repräsentiert, verschachtelt sind.
  • Autorinformationen eines <article>-Elements können mithilfe des <address>-Elements angegeben werden, dies gilt jedoch nicht für verschachtelte <article>-Elemente.
  • Das Veröffentlichungsdatum und die -zeit eines <article>-Elements können durch das 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>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Fließender Inhalt, Gliedernder Inhalt, Greifbarer Inhalt
Erlaubter Inhalt Fließender Inhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind verpflichtend.
Erlaubte Eltern Jedes Element, das fließenden Inhalt akzeptiert. Beachten Sie, dass ein <article>-Element kein Nachfahre eines <address>-Elements sein darf.
Implizite ARIA-Rolle article
Erlaubte ARIA-Rollen application, document, feed, main, none, presentation, region
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-article-element

Browser-Kompatibilität

Siehe auch