<article>: Das Artikel-Inhaltselement
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das <article>-Element repräsentiert eine eigenständige Zusammenstellung in einem Dokument, einer Seite, Anwendung oder Website, die dazu bestimmt ist, eigenständig verteilbar oder wiederverwendbar zu sein (z. B. in der Syndizierung). Beispiele umfassen: einen Forenbeitrag, einen Magazin- oder Zeitungsartikel, einen Blogeintrag, eine Produktkarte, einen von Nutzern eingesendeten Kommentar, ein interaktives Widget oder Gadget oder jeden anderen unabhängigen Inhaltsgegenstand.
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 gegebenes Dokument kann mehrere Artikel enthalten; zum Beispiel auf einem Blog, der den Text jedes Artikels nacheinander zeigt, während der Leser scrollt, wäre jeder Beitrag in einem <article>-Element enthalten, möglicherweise mit einem oder mehreren <section>-Elementen darin.
Attribute
Dieses Element umfasst nur die globalen Attribute.
Nutzungshinweise
- Jedes
<article>sollte identifiziert werden, typischerweise durch das Einschließen einer Überschrift (ein<h1>-<h6>-Element) 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 Beziehung steht. Zum Beispiel können die Kommentare eines Blogbeitrags<article>-Elemente sein, die im<article>enthalten sind, das den Blogbeitrag repräsentiert. - Autoreninformationen eines
<article>-Elements können durch das<address>-Element bereitgestellt werden, aber das gilt nicht für verschachtelte<article>-Elemente. - Das Veröffentlichungsdatum und die -zeit eines
<article>-Elements können mit demdatetime-Attribut eines<time>-Elements beschrieben werden.
Beispiele
<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, Sektionierender Inhalt, Greifbarer Inhalt |
|---|---|
| Erlaubte Inhalte | Fließender Inhalt. |
| Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
| 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 |