Aller au contenu principal

Module HTML.8 – HTML sémantique

Objectif​

Maîtriser le HTML sémantique HTML5 : balises sémantiques (<header>, <nav>, <main>, <section>, <article>, <footer>), comprendre pourquoi la sémantique est critique pour le SEO et l'accessibilité.

Théorie​

Qu'est-ce que le HTML sémantique ?​

HTML sémantique = Utiliser des balises qui donnent du sens au contenu, pas seulement de la structure.

❌ Non sémantique :

<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>

✅ Sémantique :

<header>...</header>
<nav>...</nav>
<main>...</main>

Balises sémantiques HTML5​

En-tête de section ou de page.

<header>
    <h1>Mon site web</h1>
    <p>Slogan</p>
</header>

Utilisation :

  • En-tête de page
  • En-tête d'article
  • Peut être utilisé plusieurs fois

Navigation principale.

<nav>
    <ul>
        <li><a href="/">Accueil</a></li>
        <li><a href="/about.html">À propos</a></li>
        <li><a href="/contact.html">Contact</a></li>
    </ul>
</nav>

Utilisation :

  • Menu principal
  • Navigation secondaire
  • Breadcrumbs
  • Pagination

<main>​

Contenu principal (unique par page).

<main>
    <h1>Titre de la page</h1>
    <p>Contenu principal...</p>
</main>

Règles :

  • Un seul <main> par page
  • Ne pas imbriquer dans <article>, <aside>, <nav>, <header>, <footer>

<section>​

Section thématique.

<section>
    <h2>À propos</h2>
    <p>Contenu de la section...</p>
</section>

Utilisation :

  • Regrouper du contenu thématique
  • Doit avoir un titre (<h1> à <h6>)

<article>​

Article indépendant.

<article>
    <header>
        <h2>Titre de l'article</h2>
        <p>Par Auteur, le 26 janvier 2026</p>
    </header>
    <p>Contenu de l'article...</p>
    <footer>
        <p>Tags: HTML, CSS</p>
    </footer>
</article>

Utilisation :

  • Articles de blog
  • Posts de forum
  • Commentaires
  • Contenu syndicable

<aside>​

Contenu complémentaire.

<aside>
    <h3>En savoir plus</h3>
    <ul>
        <li>Lien 1</li>
        <li>Lien 2</li>
    </ul>
</aside>

Utilisation :

  • Sidebar
  • Encadrés
  • Publicités
  • Informations complémentaires

Pied de page ou de section.

<footer>
    <p>© 2026 Mon site. Tous droits réservés.</p>
    <nav>
        <a href="/mentions-legales.html">Mentions légales</a>
    </nav>
</footer>

Utilisation :

  • Pied de page
  • Pied d'article
  • Peut être utilisé plusieurs fois

Structure sémantique complète​

Page type :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon site</title>
</head>
<body>
    <header>
        <h1>Mon site web</h1>
        <nav>
            <ul>
                <li><a href="/">Accueil</a></li>
                <li><a href="/about.html">À propos</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <header>
                <h2>Titre de l'article</h2>
                <p>Par Auteur</p>
            </header>
            <section>
                <h3>Section 1</h3>
                <p>Contenu...</p>
            </section>
            <section>
                <h3>Section 2</h3>
                <p>Contenu...</p>
            </section>
            <footer>
                <p>Tags: HTML, CSS</p>
            </footer>
        </article>
        
        <aside>
            <h3>Articles similaires</h3>
            <ul>...</ul>
        </aside>
    </main>
    
    <footer>
        <p>© 2026 Mon site</p>
    </footer>
</body>
</html>

Pourquoi la sémantique est critique​

1. SEO (Search Engine Optimization)​

Avantages :

  • Les moteurs de recherche comprennent mieux la structure
  • Meilleur référencement
  • Rich snippets possibles

Exemple :

<!-- Google comprend que c'est un article -->
<article itemscope itemtype="http://schema.org/Article">
    <h1 itemprop="headline">Titre</h1>
    <p itemprop="author">Auteur</p>
</article>

2. Accessibilité​

Avantages :

  • Screen readers comprennent la structure
  • Navigation facilitée
  • Landmarks ARIA automatiques

Landmarks :

  • <header> → banner
  • <nav> → navigation
  • <main> → main
  • <aside> → complementary
  • <footer> → contentinfo

3. Maintenabilité​

Avantages :

  • Code plus lisible
  • Structure claire
  • Facilite la collaboration

Autres balises sémantiques​

<figure> et <figcaption>​

<figure>
    <img src="image.jpg" alt="Description">
    <figcaption>Légende de l'image</figcaption>
</figure>

<time>​

<time datetime="2026-01-26">26 janvier 2026</time>
<time datetime="2026-01-26T14:30">14h30</time>

<address>​

<address>
    <p>123 Rue Example</p>
    <p>75001 Paris</p>
</address>

<mark>​

<p>Ceci est <mark>important</mark>.</p>

Exercices guidés​

Exercice 1 : Structure de base​

Créez une page avec :

  • <header> avec titre et navigation
  • <main> avec contenu principal
  • <footer> avec mentions légales

Exercice 2 : Article de blog​

Créez un article avec :

  • <article> comme conteneur
  • <header> avec titre et auteur
  • Plusieurs <section> pour les parties
  • <footer> avec tags

Exercice 3 : Page complète​

Créez une page avec :

  • Structure sémantique complète
  • <aside> pour sidebar
  • Plusieurs <section> dans le main

Exercice 4 : Figure et time​

Créez :

  • Une image avec <figure> et <figcaption>
  • Des dates avec <time>
  • Une adresse avec <address>

Exercice 5 : Validation sémantique​

Utilisez un outil d'accessibilité (WAVE, axe DevTools) pour vérifier :

  • Les landmarks
  • La structure sémantique
  • Les améliorations possibles

❌ Erreurs fréquentes​

Erreur 1 : Utiliser div partout​

❌ Mauvais :

<div class="header">...</div>
<div class="content">...</div>
<div class="footer">...</div>

✅ Bon :

<header>...</header>
<main>...</main>
<footer>...</footer>

Pourquoi : Sémantique = sens, pas seulement style.

Erreur 2 : Plusieurs main​

❌ Mauvais :

<main>...</main>
<main>...</main>

✅ Bon :

<main>
    <section>...</section>
    <section>...</section>
</main>

Pourquoi : Un seul <main> par page.

Erreur 3 : Section sans titre​

❌ Mauvais :

<section>
    <p>Contenu...</p>
</section>

✅ Bon :

<section>
    <h2>Titre de la section</h2>
    <p>Contenu...</p>
</section>

Pourquoi : Une section doit avoir un titre pour la sémantique.

Erreur 4 : Confondre article et section​

❌ Mauvais :

<section>
    <h2>Article de blog</h2>
    <p>Contenu...</p>
</section>

✅ Bon :

<article>
    <h2>Article de blog</h2>
    <p>Contenu...</p>
</article>

Pourquoi : <article> = contenu indépendant, <section> = section thématique.

Erreur 5 : Ignorer les landmarks​

❌ Mauvais :

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

✅ Bon :

<aside>...</aside>

Pourquoi : Les landmarks facilitent la navigation (screen readers, clavier).

🚀 Mini-projet​

Mission : Créer un site web sémantique complet

Créez un site avec 3 pages :

Pages :

  1. index.html : Page d'accueil avec articles
  2. article.html : Page d'article détaillé
  3. about.html : Page à propos

Structure sémantique :

  • <header> avec navigation sur chaque page
  • <main> avec contenu unique
  • <article> pour les articles
  • <section> pour les sections
  • <aside> pour sidebar
  • <footer> sur chaque page

Contenu :

  • Articles avec <figure> et images
  • Dates avec <time>
  • Adresse avec <address>
  • Navigation sémantique

Validation :

  • Utilisez WAVE ou axe DevTools
  • Vérifiez les landmarks
  • Testez avec navigation clavier
  • Validez HTML5

Critères :

  • ✅ Structure sémantique complète
  • ✅ Utilisation appropriée de toutes les balises
  • ✅ Accessibilité (landmarks)
  • ✅ SEO optimisé
  • ✅ Code maintenable

Objectif : Créer un site web avec une structure sémantique professionnelle.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez le HTML sémantique et avez créé un site avec une structure sémantique complète.