🏗️ Semaine 1 - Jour 2 : Balises sémantiques HTML5

📚 Qu'est-ce que les balises sémantiques ?

Les balises sémantiques sont des balises HTML qui donnent du sens au contenu qu'elles contiennent. Contrairement à <div>, elles indiquent clairement le rôle de chaque section de la page.

Avantages : meilleure accessibilité, meilleur référencement (SEO), code plus lisible et maintenable.

<header>

En-tête d'une page ou d'une section. Contient généralement le logo, le titre principal et la navigation.

                        <header>

                          <h1>Mon Site</h1>

                          <nav>...</nav>

                        </header>

📍 Position : Généralement au début du <body> ou d'un <article>

<nav>

Section contenant les liens de navigation principaux du site.

                        <nav>

                          <ul>

                            <li><a href="/">Accueil</a></li>

                            <li><a href="/about">À propos</a></li>

                          </ul>

                        </nav>

✅ Utilisation : Menu principal, navigation secondaire, fil d'Ariane

<main>

Contenu principal de la page. Il ne peut y avoir qu'un seul <main> par page.

                        <main>

                          <h1>Titre de la page</h1>

                          <p>Contenu principal...</p>

                        </main>

⚠️ Important : Ne pas mettre dans un <article> ou <section>

<section>

Section thématique d'un document. Chaque section devrait avoir un titre (<h2>, <h3>...).

                        <section>

                          <h2>Nos Services</h2>

                          <p>Description...</p>

                        </section>

🎯 Usage : Chapitres, onglets, regroupements thématiques

<article>

Contenu autonome et réutilisable : article de blog, commentaire, widget, carte produit...

                        <article>

                          <h2>Titre de l'article</h2>

                          <p>Contenu de l'article...</p>

                        </article>

💡 Astuce : Peut être extrait et réutilisé indépendamment du reste

<aside>

Contenu complémentaire ou secondaire : barre latérale, encadré d'informations, publicités...

                        <aside>

                          <h3>À lire aussi</h3>

                          <ul>...</ul>

                        </aside>

📌 Position : Souvent sur le côté, mais pas obligatoire

<footer>

Pied de page d'une page ou d'une section. Contient souvent copyright, liens légaux, contacts.

                        <footer>

                          <p>© 2026 Mon Site</p>

                          <nav>...</nav>

                        </footer>

📍 Position : Généralement en bas de page ou d'un <article>

📐 Structure sémantique d'une page

<header>
Logo + Navigation principale

<main>
Contenu principal de la page

<section>
Section 1 : Introduction

<section>
Section 2 : Détails

<article>
Article autonome

❌ vs ✅ Comparaison

❌ Sans sémantique

                        <div id="header">

                          <div id="nav">...</div>

                        </div>

                        <div id="main">

                          <div class="post">...</div>

                        </div>

                        <div id="footer">...</div>

Problèmes : Pas de sens, mauvais pour SEO et accessibilité

✅ Avec sémantique

                        <header>

                          <nav>...</nav>

                        </header>

                        <main>

                          <article>...</article>

                        </main>

                        <footer>...</footer>

Avantages : Clair, accessible, bon SEO, meilleur référencement

Froggiesplaining :

🎯 Objectifs de ce cours :
✅ Comprendre l'importance de la sémantique HTML
✅ Connaître les 7 balises sémantiques principales
✅ Savoir structurer une page de manière logique et accessible
✅ Différencier <section> et <article>

📖 Résumé rapide :
• <header> : En-tête de page ou de section
• <nav> : Navigation principale
• <main> : Contenu principal (unique par page)
• <section> : Section thématique
• <article> : Contenu autonome et réutilisable
• <aside> : Contenu complémentaire
• <footer> : Pied de page

🏋️ Exercice pratique :
Créez une page "Blog" avec header, nav, main contenant 3 articles, aside et footer !