Balise HTML <article>

Définition et utilisation

<article> L'étiquette définit un contenu indépendant et inclusif.

Un article doit pouvoir être compris indépendamment et peut être distribué indépendamment du site dans son ensemble.

<articel> Les sources potentielles de l'élément incluent :

  • Messages de forum
  • Articles de blog
  • Actualités
  • Commentaires des utilisateurs

Attention :Dans le navigateur,<article> Les éléments eux-mêmes n'ont pas de style spécial. Cependant, vous pouvez utiliser des styles CSS pour les styliser <article> Élément (voir les exemples ci-dessous).

Veuillez également consulter :

Manuel de référence HTML DOM :Objet Article

Exemple

Exemple 1

Trois articles indépendants et autonomes :

<article>
<h2>Google Chrome</h2>
<p>Google Chrome est un navigateur web développé par Google, lancé en 2008. Chrome est aujourd'hui le navigateur web le plus populaire au monde !</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox est un navigateur web open source développé par Mozilla. Depuis janvier 2018, Firefox est resté le deuxième navigateur web le plus populaire.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge est un navigateur web développé par Microsoft, lancé en 2015. Microsoft Edge a remplacé Internet Explorer.</p>
</article>

Essayer par vous-même

Exemple 2

Définir les styles de l'élément <article> à l'aide de CSS :

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
  <h1>Les navigateurs les plus populaires</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome est un navigateur web développé par Google, lancé en 2008. Chrome est aujourd'hui le navigateur web le plus populaire au monde !</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox est un navigateur web open source développé par Mozilla. Depuis janvier 2018, Firefox est resté le deuxième navigateur web le plus populaire.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge est un navigateur web développé par Microsoft, lancé en 2015. Microsoft Edge a remplacé Internet Explorer.</p>
  </article>
</article>
</body>
</html>

Essayer par vous-même

Attributs globaux

<article> Les balises prennent également en charge Attributs globaux dans HTML.

Attributs d'événement

<article> Les balises prennent également en charge Attributs d'événement dans HTML.

Réglages CSS par défaut

La plupart des navigateurs utilisent les valeurs par défaut suivantes pour afficher <article> Élément :

article {
  display: block;
}

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge l'élément pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1