Topic B

Article

Description

Elle sert à regrouper des informations pouvant être diffusées ou réutilisées séparément, comme un article de presse, un billet de blog, un commentaire ou une fiche produit. Chaque élément <article> doit être cohérent par lui-même et comporter généralement un titre, du texte et éventuellement des métadonnées (auteur, date, etc.). Cette balise améliore la structure sémantique du document et facilite le référencement, car elle permet aux moteurs de recherche de mieux comprendre les différentes parties du contenu.

Utilisation

La balise <article> est généralement utilisée pour marquer une partie autonome et auto-suffisante du contenu de la page. Cela signifie qu'un <article> doit avoir un sens et une utilité indépendants, même s'il est retiré du contexte de la page. Par exemple, un article de blog ou une publication de journal peut être encapsulé dans une balise <article>.

Exemples

<head>
    <title>Exemple Article</title>
</head>
<body>

<main>
    <h1>Titre du site</h1>

    <article>
        <h2>Titre de l'article</h2>
        <p>Ceci est le premier paragraphe de l'article.</p>
        <p>Ceci est le deuxième paragraphe.</p>
        <p>Et ainsi de suite...</p>
    </article>

    <article>
        <h2>Un autre article</h2>
        <p>Contenu du second article.</p>
    </article>

</main>

</body>

<article class="forecast">
  <h1>Weather forecast for Seattle</h1>
  <article class="day-forecast">
    <h2>03 March 2018</h2>
    <p>Rain.</p>
  </article>
  <article class="day-forecast">
    <h2>04 March 2018</h2>
    <p>Periods of rain.</p>
  </article>
  <article class="day-forecast">
    <h2>05 March 2018</h2>
    <p>Heavy rain.</p>
  </article>
</article>

Compatibilité

Compatibilité des navigateurs

Topic C

Section

Description

L’élément HTML <section> représente une section thématique d’un document. Il regroupe un contenu ayant un thème ou un objectif précis, souvent avec un titre, et constitue une partie distincte dans la structure du document. Contrairement à <div>, qui est purement un conteneur générique, <section> a une valeur sémantique et contribue à l’organisation logique du contenu.

Utilisation

Une <section> doit être utilisée pour un regroupement thématique de contenu. Elle peut contenir des titres (<h1> à <h6>), des paragraphes, des images, des articles, ou d’autres éléments de section. Elle ne remplace pas <article> ni <header> ou <footer> ; elle complète la structure sémantique.

Exemples

<section>
    <h2>Les chats domestiques</h2>
    <p>Les chats domestiques sont des animaux de compagnie populaires à travers le monde.</p>
    <p>Ils sont connus pour leur indépendance et leur capacité à chasser les petits rongeurs.</p>
</section>

<section>
    <h2>Les chiens domestiques</h2>
    <p>Les chiens domestiques sont souvent appelés "le meilleur ami de l'homme".</p>
    <p>Ils sont très variés en taille, apparence et tempérament.</p>
</section>

<h1>Choosing an Apple</h1>
<section>
  <h2>Introduction</h2>
  <p>
    This document provides a guide to help with the important task of choosing
    the correct Apple.
  </p>
</section>

<section>
  <h2>Criteria</h2>
  <p>
    There are many different criteria to be considered when choosing an Apple —
    size, color, firmness, sweetness, tartness...
  </p>
</section>