Polar Code 🎭

Command Palette

Search for a command to run...

Retour au dossier : Faites entrer HTML
08
Pièce N°08

Module 8 — La scène complète : sémantique HTML5

Quand tout est en place,
il ne reste plus qu’à donner du sens.
La sémantique, c’est la vérité lisible par tous.

🎯 Objectifs d’apprentissage

À la fin de ce module, vous serez capable de :

  • Utiliser les balises sémantiques HTML5 modernes
  • Structurer une page claire pour l’accessibilité
  • Améliorer le référencement (SEO) sans artifices
  • Décrire le contenu comme un rapport officiel

🧱 Structure sémantique d’une page — Le plan du dossier

Voici l’architecture type d’une page bien montée :

<header>
    <nav>
        <!-- Navigation principale -->
    </nav>
</header>

<main>
    <article>
        <!-- Rapport principal -->
    </article>

    <aside>
        <!-- Notes annexes -->
    </aside>
</main>

<footer>
    <!-- Informations finales -->
</footer>

Chaque zone a un rôle. Aucune n’est décorative.

🏷️ Les balises sémantiques — Donner un rôle clair

🧢 <header> — L’en-tête

<header>
    <h1>Dossier : Affaire du site fantôme</h1>
</header>
  • Peut contenir un titre, un logo, une intro
  • Peut exister dans une page ou dans une section
  • Ne pas confondre avec <head>

🧭 <nav> — La navigation

<nav>
    <a href="#contexte">Contexte</a>
    <a href="#preuves">Preuves</a>
    <a href="#conclusion">Conclusion</a>
</nav>
  • Regroupe les liens majeurs
  • Utile pour les lecteurs d’écran
  • Une page peut avoir plusieurs <nav>

🧠 <main> — Le cœur du dossier

<main>
    <article>...</article>
</main>
  • Un seul par page
  • Contenu principal unique
  • Ne doit pas être imbriqué dans <header>, <nav>, <footer>

📰 <article> — Contenu autonome

<article>
    <h2>Rapport d’analyse</h2>
    <p>Le code source révèle une anomalie critique.</p>
</article>
  • Peut être partagé indépendamment
  • Article, post, fiche, rapport
  • Peut contenir son propre <header> et <footer>

🗂️ <section> — Partie thématique

<section>
    <h2>Preuves techniques</h2>
    <p>Logs, captures, traces réseau.</p>
</section>
  • Regroupe un contenu cohérent
  • Doit presque toujours avoir un titre
  • Ne remplace pas <div> par défaut

🧩 <aside> — Contenu tangentiel

<aside>
    <h3>Note interne</h3>
    <p>Le suspect avait déjà été signalé.</p>
</aside>
  • Complémentaire
  • Secondaire
  • Peut être placé dans ou hors du <main>

🧾 <footer> — Pied de page

<footer>
    <p>Dossier classé — Division Web Crimes</p>
</footer>
  • Informations finales
  • Mentions légales
  • Liens secondaires

🧠 Éléments de contenu sémantiques

⏰ <time> — La date officielle

<time datetime="2024-01-15">15 janvier 2024</time>
  • Lisible par l’humain
  • Interprétable par la machine
  • Utile pour SEO et archives

🏢 <address> — Contact ou auteur

<address>
    Inspecteur Web<br>
    <a href="mailto:web@division.fr">web@division.fr</a>
</address>
  • Auteur
  • Contact
  • Responsable du contenu

🔎 <details> et <summary> — Informations cachées

<details>
    <summary>Voir les détails de l’enquête</summary>
    <p>Analyse complète des journaux serveur.</p>
</details>
  • Interaction native
  • Accessible
  • Sans JavaScript

📊 <progress> — Avancement

<progress value="70" max="100">70%</progress>
  • Progression d’une tâche
  • Enquête en cours

⚖️ <meter> — Indicateur de niveau

<meter value="0.8">Niveau de risque élevé</meter>
  • Mesure une valeur dans un intervalle
  • Différent de progress

⚠️ Sémantique vs <div> — Le bon choix

  • <div> : neutre, sans sens
  • Balise sémantique : rôle clair

👉 Utilisez <div> uniquement quand aucune balise sémantique ne convient.

  • Fin du module 8. La scène est complète, lisible, compréhensible.