Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
<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émentHTML<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> <h1>Prévisions météo pour Seattle</h1> <article> <h2>03 mars 2018</h2> <p>Pluie.</p> </article> <article> <h2>04 mars 2018</h2> <p>Périodes de pluie.</p> </article> <article> <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 lesattributs 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> <h2>Jurassic Park</h2> <section> <h3>Critique</h3> <p>Les dinosaures étaient super !</p> </section> <section> <h3>Avis des utilisateur·ices</h3> <article> <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> <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 ducontenu 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 |