[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/article [Back]  [Original]

lment HTML <article> : l'lment de contenu d'un article - HTML | MDN

Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.

View in English Always switch to English

lment HTML <article> : l'lment de contenu d'un article

Baseline Large disponibilit

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'lment HTML <article> reprsente une composition autonome dans un document, une page, une application ou un site, destine tre distribue ou rutilise indpendamment (par exemple dans une syndication). Les exemples incluent : un message de forum, un article de magazine ou de journal, une entre de blog, une fiche produit, un commentaire soumis par une utilisateurice, un widget ou gadget interactif, ou tout autre lment de contenu indpendant.

Dans cet article

Exemple interactif

<article class="forecast">
  <h1>Prvisions mto 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>Priodes 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 aprs l'autre au fur et mesure que le lecteur fait dfiler, chaque article serait contenu dans un lment <article>, avec ventuellement une ou plusieurs balises <section> l'intrieur.

Attributs

Cet lment n'a pas d'autres attributs que les attributs universels, communs tous les lments.

Notes d'utilisation

  • Chaque lment <article> doit tre identifi, gnralement en incluant un titre (un lment <h1> <h6>) comme enfant de l'lment <article>.
  • Lorsqu'un lment <article> est imbriqu, l'lment intrieur reprsente un article li l'lment extrieur. Par exemple, les commentaires d'un article de blog peuvent tre des lments <article> imbriqus dans l'lment <article> reprsentant l'article de blog.
  • Les informations sur l'auteur ou l'autrice d'un lment <article> peuvent tre fournies via l'lment <address>, mais cela ne s'applique pas aux lments <article> imbriqus.
  • La date et l'heure de publication d'un lment <article> peuvent tre dcrites l'aide de l'attribut datetime d'un lment <time>.

Exemples

html
<article class="film_review">
  <h2>Jurassic Park</h2>
  <section class="main_review">
    <h3>Critique</h3>
    <p>Les dinosaures taient super&nbsp;!</p>
  </section>
  <section class="user_reviews">
    <h3>Avis des utilisateurices</h3>
    <article class="user_review">
      <h4>Trop effrayant&nbsp;!</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&nbsp;!</h4>
      <p>Je suis d'accord, les dinosaures sont mes prfrs.</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>

Rsultat

Rsum technique

Catgories 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 autoriss Tout lment acceptant du contenu de flux. Un lment <article> ne doit pas tre un descendant d'un lment <address>.
Rle ARIA implicite article
Rles ARIA autoriss application, document, feed, main, none, presentation, region
Interface DOM HTMLElement

Spcifications

Spcification
HTML
# the-article-element

Compatibilit des navigateurs

Voir aussi


Web Proxy Viewer  |  New URL  |  Original Page