1. Description de la balise <article> HTML
La balise HTML <article> est utilisée pour définir un contenu autonome et indépendant dans une page web. Elle est généralement utilisée pour encadrer un contenu qui pourrait être distribué, partagé ou réutilisé individuellement, tout en ayant du sens par lui-même. L'élément <article> est souvent utilisé pour représenter des articles de blog, des nouvelles, des commentaires, des critiques, des publications individuelles, etc. L'utilisation de la balise <article> permet de créer un contenu indépendant et significatif, facilitant ainsi la réutilisation et la distribution de vos contenus sur le web.
2. Caractéristique de la balise <article>
Voici quelques caractéristiques importantes de la balise <article> :
- Contenu autonome : Le contenu à l'intérieur de la balise <article> doit avoir un sens complet, même s'il est isolé du reste de la page. Cela signifie que l'élément doit être compréhensible et significatif en lui-même.
- Indépendance : Le contenu à l'intérieur de l'élément <article> ne devrait pas dépendre du contexte global de la page pour être compris. Il doit pouvoir être compréhensible même s'il est extrait de son contexte et présenté seul.
- Réutilisation et distribution : Étant donné que la balise <article> est destinée à encadrer un contenu pouvant être distribué ou réutilisé individuellement, elle est souvent utilisée dans les flux RSS, les agrégateurs de contenu, les moteurs de recherche, etc.
3. Exemples d'usages de la balise <article>
Voici un exemple simple d'utilisation de la balise <article> :
Exemple
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Dans cet exemple, l'élément <article> contient un titre, un contenu textuel et des informations de publication associées. L'ensemble de cet élément forme une unité autonome et indépendante de contenu.--> <article> <h2>Titre de l'article</h2> <p>Cet article traite de divers sujets intéressants...</p> <p>Plus de détails et d'informations passionnantes...</p> <footer> <p>Publié le 17 août 2023 par John Doe</p> </footer> </article> |
Exemple (réutilisation de la balise <article>)
Supposons que vous avez un site web qui traite de différentes recettes de cuisine, et vous voulez utiliser la balise <article> pour encapsuler chaque recette de manière autonome et réutilisable :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title>Recettes de cuisine</title> </head> <body> <h1>Recettes de cuisine</h1> <article> <h2>Tarte aux pommes</h2> <p>Une délicieuse tarte aux pommes faite avec des pommes fraîches...</p> <p>Ingrédients : pommes, sucre, cannelle, pâte brisée...</p> <footer> <p>Publié le 17 août 2023 par Jane Doe</p> </footer> </article> <article> <h2>Spaghetti à la bolognaise</h2> <p>Un plat de pâtes classique avec une sauce bolognaise riche en saveurs...</p> <p>Ingrédients : pâtes spaghetti, viande hachée, tomates, oignons...</p> <footer> <p>Publié le 19 août 2023 par John Smith</p> </footer> </article> <!-- Plus d'articles de recettes peuvent être ajoutés ici --> </body> </html> |
Dans cet exemple:
- La balise <article>: encapsule chaque recette .
- Chaque article: contient un titre, une description de la recette, la liste des ingrédients et des informations de publication.
- Chaque article est autonome: et peut être réutilisé individuellement, par exemple, dans des flux RSS, des pages d'archives, ou d'autres parties du site qui mettent en avant des recettes spécifiques.
Younes Derfoufi
CRMEF OUJDA
1 thought on “La balise <article> HTML”