Vous ouvrez votre éditeur de code, vous créez un fichier index.html, et là, première question : par où commence une page web ? Beaucoup de débutants empilent des <div> les unes dans les autres jusqu’à obtenir quelque chose qui ressemble à une page. Ça marche… visuellement. Mais le navigateur, le moteur de recherche et le lecteur d’écran d’une personne malvoyante, eux, ne voient qu’une bouillie de boîtes sans signification. Dans cette leçon, vous allez construire le squelette de la page d’accueil d’une médiathèque associative — un vrai projet que nous enrichirons ensuite — en utilisant le HTML sémantique : un balisage qui dit ce que chaque morceau de la page signifie, pas seulement à quoi il ressemble.

📍 À lire d’abord : Apprendre HTML & CSS de zéro — le parcours complet. Cette leçon est la première étape pratique de ce parcours.

🎯 Ce que vous allez apprendre

Écrire le squelette minimal d’un document HTML5 valide, balise par balise.
Distinguer un balisage sémantique d’une « soupe de div » et savoir pourquoi cela change tout.
Placer correctement les éléments de structure (header, nav, main, article, section, aside, footer).
Construire une hiérarchie de titres cohérente, lisible par les machines comme par les humains.
Valider votre page avec le validateur officiel du W3C et corriger les erreurs courantes.

🛠️ Ce que vous allez construire

La page d’accueil de la Médiathèque Horizon : un en-tête avec son logo et son menu, une zone principale présentant l’établissement et une sélection d’ouvrages, une colonne latérale d’informations pratiques, et un pied de page. Pour l’instant, sans aucune couleur ni mise en page : uniquement la structure. C’est la fondation sur laquelle tout le reste — typographie, modèle de boîte, Flexbox, Grid, responsive — viendra se poser dans les leçons suivantes. Une fondation bancale, et tout l’édifice penche ; une fondation propre, et le CSS devient un plaisir.

Prérequis

Un éditeur de code (Visual Studio Code, gratuit et multiplateforme, est le standard de fait).
Un navigateur récent (Firefox, Chrome, Edge ou Safari).
Aucune connaissance préalable. Si vous savez créer un fichier et le sauvegarder, vous êtes prêt.
⏱️ Temps estimé : environ 40 minutes.

Étape 1 — Le squelette minimal d’un document HTML5

Avant de parler de sémantique, il faut un document valide. Chaque page HTML moderne commence par les mêmes cinq lignes incontournables. Elles ne s’affichent pas à l’écran, mais elles indiquent au navigateur comment interpréter tout le reste : quelle version du langage, quel encodage de caractères, quelle langue, comment se comporter sur mobile. Créez un fichier index.html et tapez ceci à la main — la mémoire musculaire compte, ne copiez-collez pas.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Médiathèque Horizon — Accueil</title>
  </head>
  <body>
    <!-- Tout le contenu visible vient ici -->
  </body>
</html>

Décortiquons. <!DOCTYPE html> déclare que ce document suit la norme HTML actuelle (le « living standard » maintenu par le WHATWG) ; sans lui, les navigateurs basculent dans un mode de compatibilité hérité aux comportements imprévisibles. L’attribut lang="fr" sur la balise <html> annonce la langue principale : les lecteurs d’écran choisiront la bonne voix de synthèse, et les moteurs de recherche serviront votre page aux bons utilisateurs. La balise <meta charset="UTF-8"> garantit que les accents — é, à, ç, œ — s’affichent correctement plutôt qu’en caractères illisibles. Le viewport est la clé du responsive : il dit au mobile d’utiliser sa largeur réelle au lieu de simuler un écran de bureau. Enfin, le <title> est ce qui apparaît dans l’onglet du navigateur et comme titre cliquable dans Google.

Ouvrez ce fichier dans votre navigateur (double-clic, ou clic droit → ouvrir avec). Vous devriez voir une page blanche avec le bon titre dans l’onglet. Page blanche = succès : le <body> est encore vide. Si l’onglet affiche le chemin du fichier au lieu du titre, c’est que le <title> est mal fermé.

✅ Point d’étape — Votre fichier s’ouvre, l’onglet affiche « Médiathèque Horizon — Accueil », et la page est blanche. Si les accents d’un futur texte s’affichent mal, vérifiez que votre éditeur enregistre bien en UTF-8 (VS Code le fait par défaut).

Étape 2 — Comprendre la sémantique : pourquoi pas que des div ?

Le langage HTML compte plus d’une centaine de balises, et chacune porte un sens. Un <nav> n’est pas décoratif : il annonce « ceci est un bloc de navigation ». Un <button> est cliquable au clavier, focusable et annoncé comme bouton par les technologies d’assistance — gratuitement. À l’inverse, <div> et <span> sont des conteneurs neutres, sans aucune signification. Ils existent pour les cas où aucune balise sémantique ne convient.

Pourquoi est-ce important ? Trois raisons concrètes. D’abord l’accessibilité : une personne aveugle navigue avec un lecteur d’écran qui peut sauter directement « au contenu principal » ou « à la navigation » — à condition que ces zones soient balisées avec <main> et <nav>. Avec une soupe de div, ces raccourcis n’existent pas. Ensuite le référencement : Google comprend mieux une page dont la structure est explicite. Enfin la maintenabilité : six mois plus tard, relire <article> est infiniment plus parlant que relire <div class="machin">.

Voici la différence en une image. Le même menu, écrit deux fois :

<!-- ❌ Soupe de div : aucune signification -->
<div class="top">
  <div class="menu">
    <div class="lien">Accueil</div>
  </div>
</div>

<!-- ✅ Sémantique : le navigateur sait ce que c'est -->
<header>
  <nav>
    <a href="/">Accueil</a>
  </nav>
</header>

Visuellement, après mise en forme, ils peuvent être identiques. Mais le second est compréhensible par les machines. La règle d’or : choisir la balise pour ce que le contenu est, jamais pour son apparence. L’apparence, c’est le travail du CSS, que nous verrons dans les leçons suivantes.

Étape 3 — Les régions de la page : les éléments « landmark »

HTML5 a introduit un jeu d’éléments dits « de section » qui découpent une page en grandes régions identifiables, appelées landmarks (points de repère) dans le jargon de l’accessibilité. Apprenez-les, car ils reviennent sur quasiment chaque site du web :

<header> — l’en-tête : logo, titre du site, menu principal. En haut de page le plus souvent, mais on peut aussi en avoir un par article.
<nav> — un bloc de liens de navigation majeurs (menu principal, fil d’Ariane). Pas tous les liens de la page, seulement les ensembles de navigation importants.
<main> — le contenu principal, unique et central de la page. Un seul par page, et il ne doit pas être imbriqué dans un article, aside, header, footer ou nav.
<article> — un contenu autonome, qui aurait du sens sorti de son contexte : une fiche d’ouvrage, un billet de blog, un commentaire.
<section> — un regroupement thématique de contenu, normalement introduit par un titre. « La sélection du mois », « Nos horaires ».
<aside> — un contenu en marge, complémentaire : encadré, informations pratiques, liens connexes.
<footer> — le pied de page : mentions légales, contact, copyright.

Assemblons la structure de la Médiathèque. Remplacez le commentaire dans le <body> par ceci :

<body>
  <header>
    <h1>Médiathèque Horizon</h1>
    <nav>
      <a href="/">Accueil</a>
      <a href="/catalogue/">Catalogue</a>
      <a href="/adhesion/">Adhésion</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Bienvenue</h2>
      <p>Un lieu ouvert à tous pour lire, apprendre et se rencontrer.</p>
    </section>

    <section>
      <h2>La sélection du mois</h2>
      <article>
        <h3>Le Petit Prince</h3>
        <p>Antoine de Saint-Exupéry — conte philosophique.</p>
      </article>
      <article>
        <h3>L'Étranger</h3>
        <p>Albert Camus — roman.</p>
      </article>
    </section>
  </main>

  <aside>
    <h2>Infos pratiques</h2>
    <p>Ouvert du mardi au samedi, de 10h à 18h.</p>
  </aside>

  <footer>
    <p>© 2026 Médiathèque Horizon</p>
  </footer>
</body>

Rechargez la page. Vous obtenez du texte noir empilé verticalement, sans style — c’est parfaitement normal et même rassurant : cela prouve que le HTML porte le sens, et que l’apparence viendra séparément. Remarquez comme cette structure se lit presque comme un plan de la page. C’est exactement l’objectif.

✅ Point d’étape — Votre page affiche le titre, trois liens, deux sections dans le contenu principal, un encadré et un pied de page. Pour vérifier la structure côté machine : ouvrez les outils de développement du navigateur (touche F12), onglet « Accessibilité » ou « Inspecteur », et repérez les régions main, nav, contentinfo (le rôle implicite du footer).

Étape 4 — La hiérarchie des titres, colonne vertébrale du document

Les balises de titre vont de <h1> (le plus important) à <h6> (le moins important). Elles ne servent pas à « faire du gros texte » — ça, c’est le rôle du CSS — mais à établir une hiérarchie logique, exactement comme les titres et sous-titres d’un livre. Les lecteurs d’écran génèrent à partir d’eux une table des matières navigable : un utilisateur aveugle peut sauter de titre en titre pour scanner la page, comme vous le feriez du regard.

Deux règles tiennent presque tout :

Un seul <h1> par page, qui décrit le sujet global. Ici, le nom de la médiathèque.
Ne sautez pas de niveau. Après un <h2>, le sous-titre suivant est un <h3>, jamais un <h4> directement. Sauter un niveau casse la logique de l’arborescence.

Dans notre page, la hiérarchie est déjà saine : h1 (le site) → h2 (les grandes sections) → h3 (chaque ouvrage de la sélection). Si vous deviez ajouter un détail sous « Le Petit Prince », ce serait un h4. Ce simple respect des niveaux fait de vous, déjà, un développeur plus rigoureux que beaucoup de professionnels pressés.

Étape 5 — Les éléments sémantiques en ligne

La sémantique ne s’arrête pas aux grandes régions ; elle descend jusqu’au niveau du mot. Voici les balises « en ligne » (qui n’imposent pas de retour à la ligne) les plus utiles, et le piège classique qu’elles évitent.

<strong> marque une importance forte (le navigateur la rend en gras) ; <b> met en gras sans notion d’importance. Préférez <strong> quand le sens compte.
<em> indique une emphase (rendue en italique) ; <i> est un italique purement stylistique. Là encore, le sens d’abord.
<a href="..."> crée un lien — l’élément fondateur du web. Sans href, ce n’est pas un vrai lien.
<time datetime="2026-05-25"> balise une date dans un format que les machines comprennent, tout en affichant un texte lisible.
<figure> et <figcaption> associent une illustration à sa légende.
<abbr title="..."> explicite une abréviation au survol.

Enrichissons une fiche d’ouvrage pour voir ces éléments à l’œuvre :

<article>
  <h3>Le Petit Prince</h3>
  <p>
    Par <strong>Antoine de Saint-Exupéry</strong>,
    publié le <time datetime="1943-04-06">6 avril 1943</time>.
  </p>
  <p>Un conte <em>intemporel</em> sur l'essentiel.</p>
  <a href="/catalogue/le-petit-prince/">Voir la fiche complète</a>
</article>

Le résultat affiche le nom de l’auteur en gras, « intemporel » en italique, la date en texte normal et un lien cliquable. Mais sous le capot, chaque information est désormais qualifiée : un agrégateur pourrait extraire la date de publication grâce à l’attribut datetime, et un lecteur d’écran annoncera l’auteur comme une information importante. C’est ça, écrire pour les humains et pour les machines.

Étape 6 — Vérification finale : valider avec le W3C

Comment savoir si votre HTML est correct ? Le World Wide Web Consortium (W3C) met à disposition un validateur officiel et gratuit : le Markup Validation Service. Il analyse votre code et signale balises mal fermées, attributs invalides ou imbrications interdites. C’est le filet de sécurité du débutant comme du professionnel.

Rendez-vous sur le validateur, choisissez l’onglet « Validate by Direct Input », collez tout votre fichier et lancez. L’objectif : le message vert « Document checking completed. No errors or warnings to show. ». Si des erreurs apparaissent, lisez le numéro de ligne et le message — ils sont précis. Une balise oubliée comme </section> manquante produit souvent une cascade d’erreurs qui disparaissent toutes dès qu’on corrige la vraie cause, généralement la première de la liste.

✅ Point d’étape — Le validateur affiche zéro erreur. Votre squelette sémantique est solide et prêt à être habillé en CSS dans les prochaines leçons.

🐞 Pièges fréquents

Symptôme / erreur	Cause probable	Correctif
Accents affichés en « Ã© » ou « ï¿½ »	Encodage manquant ou fichier non enregistré en UTF-8	Ajouter `<meta charset="UTF-8">` et régler l’éditeur sur UTF-8
La page « zoome » bizarrement sur mobile	Balise `viewport` absente	Ajouter la `<meta name="viewport"...>` dans le `<head>`
Le validateur signale « more than one main element »	Deux `<main>` dans la page	Garder un seul `<main>`, mettre le reste en `section` ou `div`
Lecteur d’écran qui « saute » des titres	Niveaux de titre sautés (h2 puis h4)	Respecter l’ordre h1 → h2 → h3 sans trou
Tout le texte est dans des `<div>`	Réflexe « soupe de div »	Remplacer par les landmarks adéquats (header, main, footer…)

✅ Récapitulatif

Vous venez de poser les fondations de la Médiathèque Horizon : un document HTML5 valide, encodé en UTF-8, prêt pour le mobile, et structuré avec de vrais éléments sémantiques. Vous savez désormais reconnaître les landmarks (header, nav, main, aside, footer), distinguer article et section, construire une hiérarchie de titres sans trou, qualifier le texte avec strong, em et time, et valider le tout au W3C. Surtout, vous avez intégré le principe directeur : le HTML décrit le sens, le CSS décrira l’apparence. C’est la séparation qui rend les sites web maintenables.

🧾 Aide-mémoire

Élément	Rôle
`<!DOCTYPE html>`	Déclare la norme HTML actuelle
`<html lang="fr">`	Langue principale du document
`<meta charset="UTF-8">`	Encodage des caractères (accents)
`<meta name="viewport">`	Adaptation à la largeur de l’écran
`<header> / <footer>`	En-tête / pied de page
`<nav>`	Bloc de navigation majeur
`<main>`	Contenu principal (un seul par page)
`<article> / <section>`	Contenu autonome / regroupement thématique
`<aside>`	Contenu complémentaire en marge
`<h1>…<h6>`	Hiérarchie des titres

💪 À vous de jouer

Ajoutez à la page une troisième <section> intitulée « Nos services » contenant une liste à puces (<ul>) de trois services : prêt de livres, espace de travail, ateliers. Puis ajoutez dans le <footer> un lien <nav> secondaire vers les mentions légales. Validez à nouveau au W3C.

Voir une solution

<section>
  <h2>Nos services</h2>
  <ul>
    <li>Prêt de livres et de revues</li>
    <li>Espace de travail au calme</li>
    <li>Ateliers d'écriture et de lecture</li>
  </ul>
</section>

<footer>
  <p>© 2026 Médiathèque Horizon</p>
  <nav>
    <a href="/mentions-legales/">Mentions légales</a>
  </nav>
</footer>

Tutoriels frères

Créer des formulaires HTML accessibles — la prochaine brique : le formulaire d’adhésion de la médiathèque.
Le modèle de boîte CSS et les sélecteurs — pour commencer enfin à habiller cette structure.

Pour aller plus loin

🔝 Retour au parcours : Apprendre HTML & CSS de zéro
MDN — Introduction à HTML (source de référence)
WHATWG HTML Living Standard (la norme officielle)

FAQ

Quelle est la différence entre article et section ?
Un <article> a du sens de façon autonome (une fiche d’ouvrage isolée reste compréhensible) ; une <section> regroupe un thème au sein de la page et s’accompagne normalement d’un titre. Dans le doute : si le bloc pourrait être republié seul ailleurs, c’est un article.

Peut-on encore utiliser des <div> ?
Oui, absolument. Le <div> reste indispensable comme conteneur neutre, notamment pour grouper des éléments à des fins de mise en page CSS quand aucune balise sémantique ne correspond. La règle est de ne pas l’utiliser à la place d’une balise sémantique existante.

Faut-il vraiment un seul <h1> ?
C’est la pratique la plus sûre et la plus largement recommandée pour la clarté et l’accessibilité. La norme HTML autorise techniquement plusieurs h1 via les éléments de sectionnement, mais le support de cet « algorithme d’outline » par les lecteurs d’écran n’a jamais été fiable : un seul h1 reste le choix prudent.

La sémantique change-t-elle l’apparence de la page ?
Très peu : quelques éléments ont un style par défaut (titres en gras, marges), mais l’essentiel de l’apparence viendra du CSS. La sémantique agit sur le sens, pas sur le style.