HTML <article> Tag
Exemple
Trois articles avec un contenu indépendant et autonome :
<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. Firefox est le deuxième navigateur web le plus populaire depuis janvier 2018.</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> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
Le <article> tag spécifie un contenu indépendant et autonome.
Un article doit avoir un sens par lui-même et il doit être possible de le distribuer indépendamment du reste du site.
Sources potentielles pour l'élément <article> :
- Publication sur un forum
- Publication de blog
- Article de presse
Remarque : L'élément <article> ne s'affiche pas comme quelque chose de spécial dans un navigateur. Cependant, vous pouvez utiliser CSS pour styliser l'élément <article> (voir l'exemple ci-dessous).
Support des Navigateurs
Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'élément.
| Élément | |||||
|---|---|---|---|---|---|
| <article> | 6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
Attributs Globaux
Le <article> tag prend également en charge les Attributs Globaux en HTML .
Attributs d'Événements
Le <article> tag prend également en charge les Attributs d'Événements en HTML .
Plus d'Exemples
Exemple
Utilisez CSS pour styliser l'élément <article> :
<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>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. Firefox est le deuxième navigateur web le plus populaire depuis janvier 2018.</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> Pages Associées
Référence DOM HTML : Objet Article
Paramètres CSS par Défaut
La plupart des navigateurs afficheront l'élément <article> avec les valeurs par défaut suivantes :
article {
display: block;
}