<address>-Elements sein darf.
<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.
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 demdatetime-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 | Flussinhalt, Abschnittsinhalt, wahrnehmbarer Inhalt |
|---|---|
| Zulässiger Inhalt | Flussinhalt. |
| Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
| Zulässige Eltern |
Jedes Element, das
Flussinhalt akzeptiert. Beachten Sie, dass ein ` |
| 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 |