📘 Chapitre 5 – Balises sémantiques et SEO

1. 🎯 Objectif pédagogique

Comprendre et utiliser les balises sémantiques HTML5 pour améliorer la lisibilité du code et le référencement naturel (SEO) des pages web.

2. 📚 Concepts abordés

Balises sémantiques principales : <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
Différence entre balises structurelles (<div>) et sémantiques
Importance des titres hiérarchisés (<h1> à <h6>) pour le SEO
Bonnes pratiques pour la structure logique d’une page
Impact des balises sémantiques sur l’accessibilité et les moteurs de recherche

3. 🧠 Explication théorique

Les balises sémantiques décrivent clairement le rôle du contenu pour les navigateurs et moteurs de recherche. Par exemple :

<header> : en-tête de la page ou d’une section,
<nav> : liens de navigation,
<main> : contenu principal,
<article> : contenu indépendant (ex. un article de blog),
<footer> : bas de page.

Ces balises facilitent le référencement (SEO) car elles indiquent la structure de la page, ce qui aide Google à comprendre l’importance des informations.

Exemple de structure sémantique :

<header>
  <h1>Mon blog</h1>
  <nav>
    <a href="#">Accueil</a>
    <a href="#">Articles</a>
    <a href="#">Contact</a>
  </nav>
</header>

<main>
  <article>
    <h2>Titre de l’article</h2>
    <p>Contenu de l’article…</p>
  </article>
</main>

<footer>
  <p>&copy; 2025 – Mon blog</p>
</footer>

4. 🛠 Tutoriel pratique

Résumé du travail : Créer une page d’accueil de blog en utilisant des balises sémantiques (header, nav, main, footer) et en organisant un article simple.

Arborescence du projet :

mon_projet/
└── index.html

Étape 1 : Créer le header et la navigation

<header>
  <h1>Blog Tech</h1>
  <nav>
    <a href="#">Accueil</a>
    <a href="#">Articles</a>
    <a href="#">Contact</a>
  </nav>
</header>

Étape 2 : Ajouter le contenu principal

<main>
  <article>
    <h2>Bienvenue sur mon blog</h2>
    <p>Découvrez des tutoriels et astuces sur le développement web.</p>
  </article>
</main>

<footer>
  <p>&copy; 2025 – Blog Tech</p>
</footer>

5. 🧾 Résumé et points-clés

Les balises sémantiques structurent et décrivent mieux le contenu.
Le SEO est amélioré par une hiérarchie logique de titres et sections.
Préférez les balises sémantiques aux <div> génériques.