Cours de Developpement Web
HTML5 — Module 3 : Semantique HTML5
5
par IARO
Balises semantiques, structure de page et accessibilite • Niveau debutant
Module 3
Semantique HTML5
Balises structurelles, accessibilite et bonnes pratiques de mise en page
Objectifs du module
Comprendre pourquoi la semantique HTML5 est essentielle
Maitriser les 10 balises structurelles : header, nav, main, section, article...
Distinguer <div> et <span> des balises semantiques
Utiliser figure, figcaption, details, summary, dialog et address
Structurer une page web complete de facon semantique
Comprendre l impact sur le SEO et l accessibilite (ARIA)
Niveau Duree Prerequis Module
Debutant 3 a 4h Modules 1 et 2 3 / 16
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 1 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
1 Pourquoi la semantique HTML5 ?
La semantique HTML consiste a utiliser les bonnes balises pour decrire le sens du contenu, et non uniquement
son apparence. Avant HTML5, les developpeurs utilisaient massivement <div> et <span> avec des classes CSS
pour tout structurer. HTML5 a introduit des balises specifiques qui donnent du sens a chaque partie de la page.
Avant HTML5 (mauvaise pratique) Avec HTML5 (bonne pratique)
Navigation <div class="nav">...</div> <nav>...</nav>
En-tete <div class="header">...</div> <header>...</header>
Contenu prin. <div id='main'>...</div> <main>...</main>
Article <div class="article">...</div> <article>...</article>
Pied de page <div class="footer">...</div> <footer>...</footer>
Sidebar <div class="sidebar">...</div> <aside>...</aside>
SEO ameliore Accessibilite Maintenabilite
moteurs de recherche comprennent mieuxLes
la structure
lecteurs detecran
le contenu
navigent
principal
par reperes semantiques
Le code est
(header,
plus lisible,
nav, main...)
comprehensible et facile a maintenir en equipe
2 Vue d ensemble — Structure d une page semantique
Voici la structure type d une page HTML5 semantique complete. Chaque zone a sa balise dediee avec un role clair
pour le navigateur, les moteurs de recherche et les technologies d assistance.
<html>
<nav> Accueil | A propos | Contact </nav> <header>
Logo + Navigation principale
<main>
<section> Section 2
<article> <aside>
Contenu principal autonome Sidebar / widgets
<section> Section 1
<footer>
Copyright | Liens legaux | Reseaux sociaux
</html>
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 2 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 3 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
3 La balise header — En-tete de page ou de section
<header> Element de bloc — En-tete
La balise <header> represente l en-tete introductif d une page ou d une section. Elle contient generalement le logo, le titre
principal, la navigation et les elements d introduction. On peut avoir plusieurs <header> dans une page (un par section ou
article).
Attributs :
Aucun attr. specifique — Herite de tous les attributs globaux (id, class, aria-*)
<header>
<img src='[Link]' alt='Logo IARO'>
<h1>IARO - Formation Web</h1>
<nav>
<a href='/'>Accueil</a>
<a href='/cours'>Cours</a>
</nav>
</header>
Ne pas confondre <header> avec <head>. Le <head> est invisible et contient les metadonnees. Le <header> est
visible dans le <body> et fait partie du contenu de la page. On peut utiliser <header> aussi bien au niveau de la
page entiere que dans un <article> ou <section>.
!
4 La balise nav — Navigation principale
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 4 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
<nav> Element de bloc — Navigation
La balise <nav> delimite un bloc de navigation principal contenant des liens vers d autres pages ou sections. Ne pas
utiliser pour tous les groupes de liens : uniquement les navigations majeures (menu principal, fil d Ariane, sommaire).
Attributs :
aria-label — Differencie plusieurs nav sur une meme page (menu principal, paginatio
<!-- Navigation principale -->
<nav aria-label="Navigation principale">
<ul>
<li><a href='/'>Accueil</a></li>
<li><a href='/cours'>Cours</a></li>
<li><a href='/contact'>Contact</a></li>
</ul>
</nav>
<!-- Fil d ariane (breadcrumb) -->
<nav aria-label="Fil d ariane">
<a href='/'>Accueil</a> > <a href='/html'>HTML5</a> > Module 3
</nav>
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 5 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
5 La balise main — Contenu principal unique
<main> Element de bloc — Contenu principal
La balise <main> identifie le contenu principal et unique de la page. Il ne peut y avoir qu un seul element <main> visible par
page. Il exclut le contenu repete sur plusieurs pages (header, nav, footer, sidebar). Fondamental pour l accessibilite : les
lecteurs d ecran y sautent directement.
Attributs :
hidden — Peut etre cache (hidden) si plusieurs main existent pour des SPA
<body>
<header>...</header>
<nav>...</nav>
<main>
<!-- Contenu unique a cette page -->
<h1>Introduction au HTML5</h1>
<article>...</article>
</main>
<footer>...</footer>
</body>
6 La balise section — Section thematique
<section> Element de bloc — Section thematique
La balise <section> regroupe un contenu thematiquement coherent, avec un titre. Chaque section devrait avoir un titre (h2,
h3...). Utiliser <section> pour diviser un long contenu en parties logiques, ou pour grouper des articles similaires.
Attributs :
aria-labelledby — Associe la section a son titre pour les lecteurs d ecran
<main>
<section>
<h2>Les balises de structure</h2>
<p>Cette section explique header, nav, main...</p>
</section>
<section>
<h2>Les balises de contenu</h2>
<p>Cette section explique article, aside...</p>
</section>
</main>
7 La balise article — Contenu autonome
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 6 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
<article> Element de bloc — Contenu autonome
La balise <article> represente un contenu independant et autonome qui pourrait etre redistribue separement (flux RSS,
partage, impression). Exemples : article de blog, post de forum, commentaire, fiche produit, tweet.
Attributs :
Aucun attr. specifique — Supporte tous les attributs globaux
<article>
<header>
<h2>Apprendre HTML5 en 2025</h2>
<time datetime="2025-04-01">1er avril 2025</time>
<p>Par <strong>Equipe IARO</strong></p>
</header>
<section><h3>Introduction</h3><p>...</p></section>
<section><h3>Les bases</h3><p>...</p></section>
<footer><p>Tags : HTML, Web, Formation</p></footer>
</article>
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 7 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
8 La balise aside — Contenu complementaire
<aside> Element de bloc — Contenu secondaire
La balise <aside> represente un contenu indirectement lie au contenu principal. Il est tangentiellement en rapport avec le
contenu qui l entoure. Exemples : sidebar, widgets, publicites, biographie de l auteur, liens connexes, glossaire.
Attributs :
aria-label — Decrit le role de l aside pour les technologies d assistance
<main>
<article>
<h2>Cours HTML5</h2>
<p>Contenu principal...</p>
</article>
<aside>
<h3>A propos de l auteur</h3>
<p>Equipe pedagogique IARO...</p>
<h3>Articles connexes</h3>
<ul><li><a href='#'>CSS3</a></li></ul>
</aside>
</main>
9 La balise footer — Pied de page
<footer> Element de bloc — Pied de page
La balise <footer> contient les informations de bas de page : copyright, liens legaux, coordonnees, reseaux sociaux, plan
du site. Comme <header>, on peut avoir plusieurs <footer> dans une page (un global, un dans chaque article).
Attributs :
Aucun attr. specifique — Supporte tous les attributs globaux
<!-- Footer global de la page -->
<footer>
<nav aria-label='Liens legaux'>
<a href='/mentions'>Mentions legales</a>
<a href='/cgu'>CGU</a>
</nav>
<address>
IARO Formation, Antananarivo, Madagascar
</address>
<p><small>Copyright 2025 IARO. Tous droits reserves.</small></p>
</footer>
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 8 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
10 La balise address — Coordonnees de contact
<address> Element de bloc — Coordonnees
La balise <address> fournit les informations de contact pour l element ancetre le plus proche (article ou body). Elle n est
pas limitee aux adresses postales : email, telephone, liens de profil sont aussi valides.
Attributs :
Aucun attr. specifique — Supporte tous les attributs globaux
<!-- Coordonnees de l auteur d un article -->
<article>
<address>
Ecrit par <a href='[Link]
Antananarivo, Madagascar.
<a href='[Link] 00 00 00 00</a>
</address>
</article>
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 9 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
11 figure et figcaption — Illustrations legendees
<figure> Element de bloc — Illustration
La balise <figure> encapsule un contenu autonome qui illustre le texte principal (image, graphique, schema, code, video).
<figcaption> fournit la legende de l illustration. Le contenu peut etre deplace sans impacter le flux principal.
Attributs :
<figcaption> — Legende de la figure, peut etre placee avant ou apres le contenu
<!-- Image avec legende -->
<figure>
<img src='[Link]' alt='Structure HTML5'>
<figcaption>Fig. 1 — Structure d une page HTML5 semantique</figcaption>
</figure>
<!-- Bloc de code avec legende -->
<figure>
<pre><code><!DOCTYPE html>...</code></pre>
<figcaption>Exemple : Structure de base HTML5</figcaption>
</figure>
12 details et summary — Accordeon natif HTML5
<details> Element de bloc — Accordeon interactif
La balise <details> cree un widget d accordeon natif sans JavaScript. Le contenu est masque par defaut et revele au clic.
<summary> definit le titre cliquable visible. L attribut open l affiche ouvert par defaut.
Attributs :
open — Affiche le contenu ouvert par defaut
<summary> — Titre cliquable de l accordeon (obligatoire)
<details>
<summary>Qu est-ce que le HTML5 ?</summary>
<p>HTML5 est la 5e version du langage de balisage web.</p>
</details>
<!-- Ouvert par defaut -->
<details open>
<summary>Objectifs du cours</summary>
<ul>
<li>Comprendre la semantique</li>
<li>Creer des pages accessibles</li>
</ul>
</details>
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 10 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
13 La balise dialog — Fenetre modale native
<dialog> Element de bloc — Modale native
La balise <dialog> cree une fenetre de dialogue ou modale native HTML5. Elle peut etre ouverte en modal (avec fond
bloque) ou non-modal. Elle est controlee via JavaScript avec showModal() et close().
Attributs :
open — Rend la dialog visible (non-modal, sans backdrop)
showModal() — Methode JS pour ouvrir en mode modal (fond bloque)
close() — Methode JS pour fermer la dialog
<dialog id='maDialog'>
<h2>Confirmation</h2>
<p>Voulez-vous supprimer cet article ?</p>
<button onclick='[Link]("maDialog").close()'>
Annuler
</button>
<button>Confirmer</button>
</dialog>
<!-- Ouvrir la dialog en JS -->
<button onclick='[Link]("maDialog").showModal()'>
Ouvrir</button>
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 11 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
14 div et span — Conteneurs neutres
Les balises <div> et <span> sont des conteneurs generiques sans semantique. Ils sont indispensables pour le
CSS et JavaScript, mais ne doivent pas remplacer les balises semantiques quand celles-ci existent.
[Link]
<!-- div : conteneur de bloc neutre -->
<!-- Utiliser quand aucune balise semantique ne convient -->
<div class="card">
<h3>Titre de la carte</h3>
<p>Contenu de la carte</p>
</div>
<!-- span : conteneur inline neutre -->
<p>Prix : <span class="prix">45 <span class="devise">EUR</span></span></p>
<!-- A EVITER : div quand une balise semantique existe -->
<div class="nav">...</div> <!-- utiliser <nav> -->
<div class="footer">...</div> <!-- utiliser <footer> -->
15 section vs article vs div — Comment choisir ?
Le choix entre ces trois balises est source de confusion. Voici la regle de decision.
Question Balise a utiliser
Le contenu est-il totalement autonome et redistribuable ? <article>
Le contenu est-il thematique et necessite un titre ? <section>
Le contenu est-il uniquement pour CSS ou JS ? <div>
C est un ensemble de liens de navigation ? <nav>
C est une introduction ou un en-tete ? <header>
C est un pied de page ? <footer>
C est du contenu supplementaire/contextuel ? <aside>
C est le contenu principal unique de la page ? <main>
16 Imbrications valides et invalides
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 12 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
[Link]
<!-- CORRECT : article contient plusieurs sections -->
<article>
<header><h2>Titre de l article</h2></header>
<section><h3>Partie 1</h3><p>...</p></section>
<section><h3>Partie 2</h3><p>...</p></section>
<footer><p>Tags, date...</p></footer>
</article>
<!-- CORRECT : main contient sections et articles -->
<main>
<section>
<h2>Articles recents</h2>
<article>...</article>
<article>...</article>
</section>
</main>
<!-- INTERDIT : main ne peut pas etre dans header/footer/aside -->
<!-- INTERDIT : nav dans footer est OK, main dans footer NON -->
<!-- INTERDIT : section sans titre (utiliser div a la place) -->
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 13 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
17 Impact sur le SEO
Les moteurs de recherche (Google, Bing...) utilisent la structure semantique pour comprendre et indexer le
contenu. Une bonne semantique ameliore directement le classement.
Balise Impact SEO
<main> Identifie le contenu principal a indexer en priorite
<article> Contenu independant, fort signal de qualite pour Google
<header> h1 Titre principal, signal le plus important pour le SEO
<nav> Liens de navigation, aide l exploration du site (crawl)
<aside> Contenu secondaire, poids SEO plus faible
<footer> Liens legaux, mentions, peu de poids SEO
<time datetime> Dates lisibles par les moteurs, rich snippets
<figure> <figcaption> Legende d image indexee et associee a l image
18 Accessibilite et roles ARIA des balises semantiques
Les balises semantiques HTML5 ont des roles ARIA implicites. Cela signifie que les lecteurs d ecran les
reconnaissent automatiquement sans avoir besoin d ajouter role=...
Balise HTML5 Role ARIA implicite Equivalent ARIA explicite (eviter si HTML5 dispo)
<header> banner role="banner"
<nav> navigation role="navigation"
<main> main role="main"
<section> region role="region"
<article> article role="article"
<aside> complementary role="complementary"
<footer> contentinfo role="contentinfo"
<dialog> dialog role="dialog"
<details> group role="group"
<summary> button role="button"
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 14 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
19 Exercice pratique — Page de blog complete et semantique
Construisez cette page de blog en utilisant uniquement des balises semantiques HTML5.
[Link] — partie 1/2
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog IARO - Developpement Web</title>
</head>
<body>
<header>
<img src="[Link]" alt="IARO Formation">
<nav aria-label="Navigation principale">
<a href='/'>Accueil</a> | <a href='/cours'>Cours</a>
</nav>
</header>
<main>
<section>
<h1>Articles recents</h1>
<article>
<header>
<h2>Apprendre HTML5 en 2025</h2>
<time datetime="2025-04-01">1er avril 2025</time>
</header>
<p>Introduction a la semantique HTML5...</p>
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 15 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
[Link] — partie 2/2
<figure>
<img src='[Link]' alt='Schema HTML5'>
<figcaption>Structure d une page HTML5</figcaption>
</figure>
<details>
<summary>Voir les ressources</summary>
<ul><li><a href='#'>W3C HTML5 spec</a></li></ul>
</details>
<footer>
<address>Par <a href='[Link]
</footer>
</article>
</section>
<aside>
<h2>A propos d IARO</h2>
<p>Formation au developpement web a Madagascar.</p>
</aside>
</main>
<footer>
<small>Copyright 2025 IARO. Tous droits reserves.</small>
</footer>
</body>
</html>
20 Resume du Module 3 — Toutes les balises semantiques
Balise Role Peut contenir
<header> En-tete de page/section nav, h1-h6, img, p, ...
<nav> Navigation principale ul, ol, a, ...
<main> Contenu principal unique section, article, h1-h6, ...
<section> Section thematique h2-h6, p, article, ...
<article> Contenu autonome header, section, footer, ...
<aside> Contenu secondaire section, nav, p, ...
<footer> Pied de page/section nav, address, p, small, ...
<address> Coordonnees de contact a, p, br, ...
<figure> Illustration legendee img, pre, video, figcaption
<figcaption> Legende d une figure Texte, elements inline
<details> Accordeon natif summary + tout contenu
<summary> Titre de l accordeon Texte, elements inline
<dialog> Fenetre modale native Tout contenu de flux
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 16 / 17
HTML5 Module 3 — Semantique HTML5 par IARO
<div> Conteneur neutre (bloc) Tout contenu
<span> Conteneur neutre (inline) Elements inline
Fin du Module 3 — Prochain : Module 4 : Liens et navigation
IARO | Cours de Developpement Web | HTML5 - Module 3 : Semantique HTML5 Page 17 / 17