<article> : l'élément de contenu d'un article
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'élément HTML <article> représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée indépendamment (par exemple dans une syndication). Les exemples incluent : un message de forum, un article de magazine ou de journal, une entrée de blog, une fiche produit, un commentaire soumis par un·e utilisateur·ice, un widget ou gadget interactif, ou tout autre élément de contenu indépendant.
Exemple interactif
<article class="forecast">
<h1>Prévisions météo pour Seattle</h1>
<article class="day-forecast">
<h2>03 mars 2018</h2>
<p>Pluie.</p>
</article>
<article class="day-forecast">
<h2>04 mars 2018</h2>
<p>Périodes de pluie.</p>
</article>
<article class="day-forecast">
<h2>05 mars 2018</h2>
<p>Forte pluie.</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;
}
Un document donné peut contenir plusieurs articles ; par exemple, sur un blog qui affiche le texte de chaque article l'un après l'autre au fur et à mesure que le lecteur fait défiler, chaque article serait contenu dans un élément <article>, avec éventuellement une ou plusieurs balises <section> à l'intérieur.
Attributs
Cet élément n'a pas d'autres attributs que les attributs universels, communs à tous les éléments.
Notes d'utilisation
- Chaque élément
<article>doit être identifié, généralement en incluant un titre (un élément<h1>à<h6>) comme enfant de l'élément<article>. - Lorsqu'un élément
<article>est imbriqué, l'élément intérieur représente un article lié à l'élément extérieur. Par exemple, les commentaires d'un article de blog peuvent être des éléments<article>imbriqués dans l'élément<article>représentant l'article de blog. - Les informations sur l'auteur ou l'autrice d'un élément
<article>peuvent être fournies via l'élément<address>, mais cela ne s'applique pas aux éléments<article>imbriqués. - La date et l'heure de publication d'un élément
<article>peuvent être décrites à l'aide de l'attributdatetimed'un élément<time>.
Exemples
<article class="film_review">
<h2>Jurassic Park</h2>
<section class="main_review">
<h3>Critique</h3>
<p>Les dinosaures étaient super !</p>
</section>
<section class="user_reviews">
<h3>Avis des utilisateur·ices</h3>
<article class="user_review">
<h4>Trop effrayant !</h4>
<p>Beaucoup trop effrayant pour moi.</p>
<footer>
<p>
Posté le
<time datetime="2015-05-16 19:00">16 mai</time>
par Lisa.
</p>
</footer>
</article>
<article class="user_review">
<h4>J'adore les dinosaures !</h4>
<p>Je suis d'accord, les dinosaures sont mes préférés.</p>
<footer>
<p>
Posté le
<time datetime="2015-05-17 19:00">17 mai</time>
par Tom.
</p>
</footer>
</article>
</section>
<footer>
<p>
Posté le
<time datetime="2015-05-15 19:00">15 mai</time>
par l'Équipe.
</p>
</footer>
</article>
Résultat
Résumé technique
| Catégories de contenu | Contenu de flux, contenu de section, contenu tangible. |
|---|---|
| Contenu autorisé | Contenu de flux. |
| Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires. |
| Parents autorisés |
Tout élément acceptant du
contenu de flux. Un élément <article> ne doit pas être un descendant
d'un élément <address>.
|
| Rôle ARIA implicite |
article
|
| Rôles ARIA autorisés |
application, document,
feed, main,
none, presentation,
region
|
| Interface DOM | HTMLElement |
Spécifications
| Specification |
|---|
| HTML # the-article-element |