<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 |
Browser-Kompatibilität
Loading…