Qu'est-ce que la balise article ?
La balise HTML <article> définit un contenu autonome et indépendant qui peut être extrait et réutilisé ailleurs (ex: blog, actualité).
Qu'est-ce que la balise <article> ?
La balise <article> est un élément sémantique HTML5 utilisé pour encapsuler un bloc de contenu qui forme une unité autonome. Par "autonome", on entend que le contenu doit rester parfaitement compréhensible et avoir du sens même s'il est sorti du contexte de la page (par exemple, s'il est affiché dans un flux RSS, un agrégateur de news ou partagé sur les réseaux sociaux).
C'est l'un des marqueurs sémantiques les plus puissants pour indiquer aux moteurs de recherche : "Ceci est le cœur de l'information, le reste de la page n'est que l'habillage".
Dans quels cas utiliser la balise <article> ?
Il est fréquent de confondre <article> et <section>. Pour ne plus vous tromper, demandez-vous : "Ce contenu pourrait-il être publié tel quel dans un journal ?"
- Articles de blog : L'usage le plus évident.
- Fiches produits : Sur une page liste, chaque produit est un <article>.
- Commentaires d'utilisateurs : Chaque commentaire est une unité indépendante.
- Cartes d'actualités (Cards) : Sur une page d'accueil, chaque bloc d'actualité est un <article>.
Les bénéfices SEO et Accessibilité
- Extraction de contenu (Rich Snippets) : Google utilise cette balise pour mieux comprendre la structure de vos articles et faciliter leur affichage dans les résultats enrichis ou sur Google Discover.
- Meilleure indexation : En isolant le texte informatif des éléments de navigation (sidebar, footer), vous aidez les robots à se concentrer sur les mots-clés stratégiques.
- Mode Lecture : De nombreux navigateurs (comme Safari) utilisent la balise <article> pour activer le "Mode Lecture", offrant une expérience épurée à l'utilisateur.
Implémentation dans Webflow
Webflow rend l'utilisation de cette balise très simple, particulièrement avec le CMS :
- Sur une page statique : Sélectionnez votre conteneur de contenu, allez dans le panneau Settings (touche D) et changez le Tag pour article.
- Avec les Collection Lists (CMS) : C'est ici qu'elle prend tout son sens. Sélectionnez le Collection Item (l'élément qui se répète) et attribuez-lui le tag article. Ainsi, chaque item de votre liste est sémantiquement identifié comme un contenu unique.
Petit Conseil : Un élément <article> devrait idéalement toujours contenir un titre (H1 à H6) pour être parfaitement valide d'un point de vue structurel.