Module 3 : HTML sémantique

Le navigateur ne « voit » pas ta page

Toi, tu vois un titre, un menu, un pied de page. Le navigateur, lui, ne voit rien : il lit un arbre. Chaque balise est une branche, chaque texte une feuille.

C'est quoi une <div> ?

Avant d'aller plus loin, fais connaissance avec la <div> (pour division) : une boîte toute simple qui sert à grouper d'autres balises. Elle n'a aucun effet visuel et son nom ne dit rien sur son contenu — une caisse sans étiquette.

<div>
  <h2>Buvette</h2>
  <p>Ouverte les jours de match.</p>
</div>

Une page construite uniquement avec des <div>, c'est un arbre où toutes les branches s'appellent « truc ». Ça s'affiche... mais personne ne sait ce que c'est. Ce module t'apprend à nommer les branches.

Des balises qui disent ce qu'elles contiennent

HTML propose des balises dont le nom décrit le rôle du contenu : c'est ça, la sémantique.

• <header> — l'en-tête : titre du site, slogan
• <nav> — le menu de navigation
• <main> — le contenu principal, unique sur la page
• <section> — une partie thématique du contenu
• <article> — un contenu autonome : actualité, billet de blog
• <footer> — le pied de page : mentions, contact, réseaux sociaux, copyright

Trois lecteurs te disent merci

Pourquoi se donner cette peine, si une <div> s'affiche pareil ? Parce que ta page a trois lecteurs, et un seul a des yeux :

1. Les humains (et toi dans 6 mois) — un code qui dit <footer> se relit tout seul
2. Les lecteurs d'écran — ces logiciels lisent la page à voix haute aux personnes aveugles ou malvoyantes. Ils annoncent chaque zone et permettent de sauter directement au contenu principal, sans réécouter le menu à chaque page
3. Google — les moteurs de recherche comprennent mieux une page bien structurée, et la classent mieux

Au programme

Le FC Courtételle veut un vrai site pour le club. C'est toi qui le construis, balise après balise :

1. Un en-tête et un pied de page — <header> et <footer>
2. Le menu de navigation — <nav>
3. Le cœur de la page — <main> et ses <section>
4. Les actualités du club — <article>
5. Les boîtes neutres — <div> et <span>, bloc contre inline
6. Une opération dé-div-ification : transformer une soupe de <div> en page sémantique
7. Et pour finir : la page complète du club, de A à Z

Prêt ?

Le club compte sur toi. On commence par la tête et les pieds !