Le tag <article> a été récemment ajouté à HTML5. Il est utilisé pour indiquer la section de la page, les blocs logiques, qui contiennent composition indépendante et complète avec son propre sens.

Ces blocs logiques peuvent être :

  • Une inscription de blog
  • Un message sur le forum
  • Un article dans un journal
  • Un commentaire personnalisé.

Dans un HTML-document on peut utiliser plusieurs tags <article>.

Syntaxe

Le contenu du conteneur <article> est écrit entre le tag <article> ouvrant et le tag </article> fermant. Dans le tag <article> on peut investir les titres de <h2> à <h6>. Si le titre <h1> n’a pas été utilisé avant, alors son emplacement est autorisé.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <article>
      <h1>Titre de l'article</h1>
      <p>Texte de l'article</p>
    </article>
  </body>
</html>

Résultat

Article

Un autre exemple, où on utilise plusieurs tags <article> à l’élément <section>

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document=</title>
  </head>
  <body>
    <section>
      <h1>Articles sur les fleurs</h1>
      <article>
        <h2>les Roses</h2>
        <p>la Rose – la reine des fleurs - est l'objet du culte et de l'amour ardent. Depuis des temps immémoriaux, la rose a été l'objet d'adoration et d'adoration.</p>
      </article>
      <article>
        <h2>les lis</h2>
        <p>la lis — une fleur de beauté incroyable, l'une des plus anciennes parmi une variété de plantes à bulbes. </p>
      </article>
    </section>
  </body>
</html>

Résultat

Articles sur les fleurs

Attributs

Le tag <article> supporte les Attributs globaux.

Comment styler le tag HTML <article> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <article>:

Coloration du texte dans le tag HTML <article>:

Styles de mise en page du texte pour la tag HTML <article>:

Autres propriétés utiles pour le tag HTML <article>:

Support de Navigateurs

chrome firefox safari opera
6+ 4+ 5+ 11.1+

Pratiquez vos connaissances

Quel est le rôle de la balise <article> en HTML et comment l'utiliser correctement ?
Trouvez-vous cela utile?