<article>-HTML-Element für Artikelinhalte
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 HTML-Element <article> stellt eine in sich geschlossene Komposition in einem Dokument, auf einer Seite, in einer Anwendung oder auf einer Website dar, die zur eigenständigen Verteilung oder Wiederverwendung bestimmt ist (z. B. in Syndication). Beispiele sind: ein Forenbeitrag, ein Zeitschriften- oder Zeitungsartikel, ein Blogeintrag, eine Produktkarte, ein von Benutzern eingereichter Kommentar, ein interaktives Widget oder Gadget oder jeder andere eigenständige Inhalt.
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;
}
Attribute
Dieses Element umfasst nur die globalen Attribute.
Hinweise zur Verwendung
Ein Dokument kann mehrere Artikel enthalten; beispielsweise würde in einem Blog, das beim Scrollen der Lesenden den Text jedes Artikels nacheinander anzeigt, jeder Beitrag in einem <article>-Element enthalten sein, möglicherweise mit einem oder mehreren <section>-Elementen darin.
- Jedes
<article>sollte identifiziert werden, üblicherweise durch Einfügen einer Ãberschrift (eines Elements<h1>â<h6>) als Kindelement des<article>-Elements. - Wenn ein
<article>-Element verschachtelt ist, stellt das innere Element einen Artikel dar, der mit dem äuÃeren Element zusammenhängt. Beispielsweise können die Kommentare eines Blogbeitrags<article>-Elemente sein, die im<article>-Element für den Blogbeitrag verschachtelt sind. - Autoreninformationen eines
<article>-Elements können über das Element<address>bereitgestellt werden, gelten jedoch nicht für verschachtelte<article>-Elemente. - Das Veröffentlichungsdatum und die Veröffentlichungszeit eines
<article>-Elements können mithilfe des Attributsdatetimeeines Elements<time>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 | Flussinhalt, gliedernder Inhalt, wahrnehmbarer Inhalt |
|---|---|
| Zulässiger Inhalt | Flussinhalt. |
| Weglassen von Tags | Keines, sowohl das Start- als auch das End-Tag sind erforderlich. |
| Zulässige Elternelemente |
Jedes Element, das
Flussinhalt akzeptiert. Beachten Sie, dass ein <article>-Element kein
Nachfahre eines <address>-Elements sein darf.
|
| Implizite ARIA-Rolle |
article
|
| Zulässige ARIA-Rollen |
application, document,
feed, main,
none, presentation,
region
|
| DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-article-element |