La balise <article> est utilisée pour définir un contenu indépendant, autonome et complet dans une page HTML.
De manière plus générale, tout contenu qui est susceptible d'être distribué ou réutilisé ailleurs, comme dans des flux RSS, des articles de blog, des publications, ou des sections de documentation.
Généralement, on utilise donc la balise <article> dans le but de préciser quels sont les éléments qui ont un lien entre-eux autour d'un article, comme :
- Un titre ;
- Une description ;
- Une date de publication ;
- Etc.
Structure et syntaxe de la balise <article>
Comme nous l'avons vu, la balise <article> peut contenir divers éléments HTML tels que des titres, des paragraphes, des images, ou des listes. Elle représente un élément de contenu distinct.
Syntaxe
<article>
<!-- Contenu autonome -->
</article>
Exemple d'utilisation
<article>
<h2>Titre de mon article</h2>
<p>Description</p>
</article>Dans cet exemple, nous avons bien englobé l'ensemble des éléments qui font parti du même article dans une balise <article>.
Ainsi, les moteurs de recherche parviendront plus facilement à comprendre les différents articles que nous pourrions présenter sur une page.
Attributs
La balise <article> n'a pas d'attribut spécifique. Elle peut cependant accepter tous les attributs "classiques" de HTML :
| Attribut | Description | Valeur possible |
|---|---|---|
id | Identifiant unique pour cibler l'élément. | Texte unique. |
class | Classe(s) CSS pour styliser l'article. | Liste de classes séparées par des espaces. |
style | Style CSS en ligne. | Déclarations CSS. |
lang | Langue utilisée dans l'article. | Code de langue (fr, en, etc.). |
data-* | Attributs de données personnalisés pour des besoins spécifiques. | Texte ou valeur quelconque. |
hidden | Indique que l'article doit être caché (non visible à l'utilisateur). | Aucune ou hidden. |
title | Info-bulle affichée au survol de l'article. | Texte descriptif. |
Compatibilité des navigateurs
La balise <article> est largement prise en charge par les navigateurs modernes.
| Elément | Google Chrome | Safari | Mozilla Firefox | Edge |
| <article> | Oui | Oui | Oui | Oui |