Retour au cours

Leçon 28 : Sectionnement du contenu (`<section>`, `<article>`, `<aside>`)

La Masterclass HTML : De Zéro à Développeur Web

28. Sectionnement du contenu

Ces éléments divisent le contenu principal en unités logiques et autonomes.

28.1 L'élément <section>

Utilisé pour regrouper du contenu lié. Il doit toujours être associé à un titre (h1 - h6) qui décrit le sujet de la section.

html

<main> <section> <h2>Programme du cours</h2> <p>Détails sur les modules...</p> </section> 
<section>
    <h2>Prérequis</h2>
    <p>Ce que vous devez savoir avant de commencer...</p>
</section>
</main>

28.2 L'élément <article>

Utilisé pour un contenu autonome qui est distribuable ou réutilisable indépendamment, comme un article de blog, un article de journal, un message de forum ou un commentaire d'utilisateur.

html

<main> <article> <h3>Mon premier article de blog</h3> <p>Publié le 10/01/2024</p> <p>Le contenu de l'article...</p> </article> 
<article>
    <h3>Un autre article de blog</h3>
    <p>Publié le 05/10/2024</p>
    <p>Encore plus de contenu ici...</p>
</article>
</main>

28.3 L'élément <aside>

Contenu qui est indirectement lié au contenu qui l'entoure (ex : barres latérales, citations en exergue, blocs publicitaires).

html

<main> <article>...</article> <aside> <h4>Articles liés</h4> <ul><li>...</li></ul> </aside> </main>