MAÎTRISER LE HTML : STRUCTURE, CONTENU ET SÉMANTIQUE

Fondamentaux du HTML

Par Nicolas Lamy
Mise à jour du 8 Janvier 2026

1. Fondamentaux du HTML

Le HTML est la base de tout document web. Avant de créer des sites, de les styliser ou de les rendre interactifs, il est indispensable de comprendre ce qu’est réellement le HTML, ce qu’il permet de faire, et comment le navigateur l’interprète.

Cette première partie ne cherche pas à “produire vite”, mais à comprendre correctement. Un HTML mal compris au départ entraîne systématiquement des erreurs, de la confusion et de mauvaises pratiques par la suite.

1.1 Rôle et principes du HTML

1.1.1 Qu’est-ce que le HTML et à quoi il sert

HTML signifie HyperText Markup Language.
Il s’agit d’un langage de balisage, et non d’un langage de programmation.

Concrètement, le HTML sert à :

structurer un document
organiser l’information
décrire la nature du contenu
donner du sens aux éléments d’une page

Le HTML ne sert pas à :

gérer la mise en page graphique
choisir les couleurs
créer des animations
gérer des comportements interactifs complexes

Un fichier HTML est un document texte que le navigateur lit et interprète.
Il contient des balises qui indiquent au navigateur ce que représente chaque contenu.

Exemple :

<h1>Bienvenue sur mon site</h1>
<p>Ceci est un paragraphe de texte.</p>

Ici :

h1 indique un titre principal
p indique un paragraphe

Le HTML ne dit pas comment ces éléments doivent être affichés graphiquement.
Il décrit uniquement leur rôle dans le document.

Le navigateur applique ensuite :

ses styles par défaut
puis, plus tard, ceux définis par le développeur

Exercice 1 – Identifier le rôle du HTML

Consignes:
Indiquez pour chaque affirmation si elle correspond au rôle du HTML.

Définir qu’un texte est un titre
Structurer un texte en paragraphes
Modifier la couleur d’un texte
Donner du sens à une information
Créer une animation visuelle

Correction:

1.1.2 Structure vs style vs logique

Sur le web, chaque technologie a un rôle précis.
Les confondre est l’une des erreurs les plus fréquentes chez les débutants.

HTML : structure et sens du contenu
CSS : apparence visuelle et mise en forme
JavaScript : comportement et logique interactive

Le HTML répond à la question :
“Qu’est-ce que ce contenu est ?”

Exemple :

<p>Texte important</p>

Le navigateur comprend :

il s’agit d’un paragraphe
ce texte fait partie du contenu principal

Si l’on écrit ceci :

<p style="color:red; font-size:40px;">
  Texte important
</p>

Le navigateur affiche bien le texte, mais le HTML contient désormais :

de la structure
et de l’apparence

C’est une mauvaise pratique, car :

le code devient difficile à maintenir
la structure et le style sont mélangés
le rôle du HTML n’est plus clair

Un HTML propre doit rester centré sur le sens, pas sur le visuel.

Exercice 2 – Structure ou apparence

Consignes:
Indiquez si les éléments suivants relèvent de la structure du document ou de son apparence.

Un titre principal
Un paragraphe
La taille du texte
L’organisation logique des informations
La couleur du texte

Correction:

Structure
Structure
Apparence
Structure
Apparence

1.1.3 Fonctionnement du navigateur face au HTML

Un navigateur est un logiciel capable de lire et interpréter des fichiers HTML.

Lorsqu’un navigateur ouvre une page :

Il lit le fichier HTML de haut en bas
Il analyse les balises
Il construit une structure interne du document
Il affiche le contenu selon cette structure

Le navigateur ne “devine” rien.
Il ne corrige pas la logique du document.
Il applique strictement ce qui est écrit.

Exemple :

<h2>Sous-titre</h2>
<h1>Titre principal</h1>
<p>Paragraphe</p>

Le navigateur comprend :

qu’il y a un titre de niveau 2
puis un titre de niveau 1
puis un paragraphe

Même si cela peut sembler illogique, le navigateur ne réorganise pas le contenu.

Cette lecture stricte est essentielle pour :

les moteurs de recherche
les lecteurs d’écran
l’accessibilité
la compréhension globale du document

Exercice 3 – Ordre de lecture du navigateur

Consignes:
Observez le code suivant.

<h2>Deuxième titre</h2>
<p>Un paragraphe</p>
<h1>Premier titre</h1>

Répondez aux questions :

Dans quel ordre le navigateur lit-il ce contenu ?
Corrige-t-il la hiérarchie des titres ?

Correction:

Le navigateur lit le contenu dans l’ordre du code
Non, il ne corrige pas la logique

1.1.4 Bonnes pratiques de base en HTML

Écrire du HTML, ce n’est pas seulement faire fonctionner une page.
C’est écrire un code :

lisible
compréhensible
maintenable
interprétable correctement par le navigateur

Bonnes pratiques fondamentales :

indentation claire
balises correctement fermées
structure logique
code lisible pour un humain

Exemple lisible :

<div>
  <h1>Mon site</h1>
  <p>Bienvenue sur mon site.</p>
</div>

Exemple difficile à lire :

<div><h1>Mon site</h1><p>Bienvenue sur mon site.</p></div>

Les deux fonctionnent, mais seul le premier est acceptable dans un contexte professionnel.

Exercice 4 – Améliorer la lisibilité du code

Consignes:
Réécrivez le code suivant pour qu’il respecte les bonnes pratiques de lisibilité.

<div><h1>Titre</h1><p>Texte</p><p>Autre texte</p></div>

Correction:

<div>
  <h1>Titre</h1>
  <p>Texte</p>
  <p>Autre texte</p>
</div>

1.2 Structure d’un document HTML

Un document HTML n’est pas une suite libre de balises.
Il possède une structure obligatoire que le navigateur attend.

Sans cette structure, le navigateur peut :

entrer en mode de compatibilité
interpréter le document de manière imprévisible
produire des erreurs difficiles à comprendre

1.2.1 Doctype et balise html

Le doctype indique au navigateur la version du HTML utilisée.

En HTML5, il s’écrit :

<!DOCTYPE html>

Il doit obligatoirement être placé en première ligne.

La balise html englobe l’intégralité du document.

<html lang="fr">
</html>

L’attribut lang indique la langue principale du document.
Il est utilisé par :

les navigateurs
les lecteurs d’écran
les moteurs de recherche

Exercice 5 – Identifier la structure de base

Consignes:
Dans le code suivant, identifiez :

le doctype
la balise racine du document

<!DOCTYPE html>
<html lang="fr">
</html>

Correction:

<!DOCTYPE html> est le doctype
<html lang="fr">...</html> est la balise racine

1.2.2 head et métadonnées essentielles

La balise head contient des informations non visibles par l’utilisateur, mais essentielles pour le navigateur.

On y place notamment :

le jeu de caractères
le titre de la page
des informations descriptives

Exemple minimal :

<head>
  <meta charset="UTF-8">
  <title>Ma première page HTML</title>
</head>

Le navigateur utilise ces informations pour :

afficher correctement les caractères
nommer l’onglet
comprendre le document

Exercice 6 – Construire un head valide

Consignes:
Ajoutez une balise head complète au document suivant.

<!DOCTYPE html>
<html lang="fr">
</html>

Correction:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Page HTML</title>
  </head>
</html>

1.2.3 body et contenu visible

La balise body contient l’intégralité du contenu visible du document.

Tout ce que l’utilisateur voit dans la page se trouve dans le body.
Le navigateur n’affiche que ce qui est présent à l’intérieur de cette balise.

Le body définit :

l’ordre de lecture
la hiérarchie du contenu
la structure visible du document

Exemple :

<body>
  <h1>Bienvenue</h1>
  <p>Premier paragraphe</p>
  <p>Deuxième paragraphe</p>
</body>

Le navigateur lit ce contenu strictement dans cet ordre.

Le body ne doit jamais contenir :

le jeu de caractères
le titre de la page
des métadonnées

Exercice 7 – Construire un document HTML complet

Consignes:
Créez un document HTML complet contenant :

un doctype
une balise html avec lang
un head avec charset et title
un body avec un titre et deux paragraphes

Correction:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Exercice HTML</title>
  </head>
  <body>
    <h1>Présentation</h1>
    <p>Je découvre le HTML.</p>
    <p>Cette page respecte la structure de base.</p>
  </body>
</html>

2. Balises de contenu essentielles

Dans la partie précédente, vous avez appris la structure obligatoire d’un document HTML et la séparation entre head (informations techniques) et body (contenu visible).
À partir de maintenant, vous allez apprendre à remplir le body avec des balises qui servent à décrire le contenu : texte, hiérarchie, liens, images.

L’objectif n’est pas seulement “d’afficher quelque chose”. L’objectif est de produire un HTML :

compris correctement par le navigateur
compréhensible par un humain qui lit le code
exploitable par les moteurs de recherche et les outils d’accessibilité

2.1 Texte et hiérarchie

2.1.1 Titres (h1 à h6)

Les balises de titre h1 à h6 servent à définir la hiérarchie des titres d’un document.
Elles ne servent pas à “faire du texte plus gros”. Elles servent à indiquer au navigateur et aux outils d’analyse la structure logique du contenu.

Ce que c’est
Une famille de balises de titre :

h1 : titre le plus important
h2 : titre de second niveau
h3 : sous-titre de h2
…
h6 : niveau le plus faible

À quoi ça sert

organiser le document en sections logiques
permettre à l’utilisateur de comprendre la structure de la page
permettre aux lecteurs d’écran de naviguer par titres
aider les moteurs de recherche à comprendre les sujets abordés

Comment le navigateur l’interprète
Le navigateur construit une structure de document où chaque titre marque une “étape” dans la hiérarchie.
Il applique aussi un style par défaut (souvent plus grand pour h1, plus petit ensuite), mais ce style n’est qu’une conséquence visuelle.

Ce qui est correct

utiliser h1 pour le titre principal de la page (en général un seul)
utiliser h2 pour les grandes sections
descendre progressivement : h2 puis h3 si besoin

Exemple correct :

<h1>Guide de voyage à Marseille</h1>
<h2>Quartiers à visiter</h2>
<h3>Le Panier</h3>
<h3>Le Vieux-Port</h3>
<h2>Conseils pratiques</h2>

Ce qui est incorrect

choisir un titre uniquement parce qu’il “rend plus grand”
sauter des niveaux sans raison (passer de h1 à h4)
utiliser plusieurs h1 pour des titres qui ne sont pas le titre principal

Exemple incorrect :

<h1>Accueil</h1>
<h4>Présentation</h4>
<h2>Contact</h2>

Problèmes :

saut h1 → h4 : la hiérarchie devient incohérente
la structure logique est plus difficile à interpréter

Explication du code (ligne par ligne) sur un exemple correct

<h1>Guide de voyage à Marseille</h1>

h1 indique le sujet principal de la page
le navigateur et les outils d’analyse comprennent que tout ce qui suit est lié à ce thème

<h2>Quartiers à visiter</h2>

h2 ouvre une grande section de contenu
cette section appartient au sujet de la page défini par le h1

<h3>Le Panier</h3>

h3 est une sous-section de la section “Quartiers à visiter”
il ne devrait pas apparaître sans h2 au-dessus

Exercice 1 – Construire une hiérarchie de titres correcte

Consignes
Écrivez la hiérarchie de titres HTML pour une page dont le sujet est “Recettes simples”, avec :

un titre principal
deux sections : “Entrées” et “Desserts”
dans “Desserts”, deux sous-sections : “Gâteaux” et “Fruits”

Correction

<h1>Recettes simples</h1>
<h2>Entrées</h2>
<h2>Desserts</h2>
<h3>Gâteaux</h3>
<h3>Fruits</h3>

2.1.2 Paragraphes

La balise p définit un paragraphe, c’est-à-dire un bloc de texte cohérent destiné à être lu comme une unité.

Ce que c’est

une balise de contenu textuel
un bloc, séparé du reste par le navigateur (retours à la ligne, marges par défaut)

À quoi ça sert

structurer un texte en unités lisibles
éviter les textes “en bloc” difficiles à lire
donner du sens au texte en indiquant au navigateur : “ceci est un paragraphe”

Comment le navigateur l’interprète
Le navigateur crée un élément de type paragraphe dans la structure interne du document.
Il applique un style par défaut : généralement un retour à la ligne avant/après.

Ce qui est correct

utiliser p pour tout texte de type “phrase / bloc de lecture”
créer plusieurs paragraphes plutôt qu’un seul énorme

Exemple correct :

<p>Je découvre les bases du HTML.</p>
<p>Je structure mon texte avec des paragraphes.</p>

Ce qui est incorrect

écrire du texte directement dans le body sans balise
utiliser des retours à la ligne pour simuler des paragraphes

Exemple incorrect :

Je découvre le HTML.
Je structure mon texte.

Le navigateur peut afficher ce texte, mais vous perdez :

la sémantique (le sens)
la structure du document
la cohérence avec les outils d’analyse

Explication ligne par ligne d’un exemple correct

<p>Je découvre les bases du HTML.</p>

p indique : “ce texte est un paragraphe”
le navigateur l’affiche comme un bloc séparé

Exercice 2 – Transformer un texte brut en paragraphes

Consignes
Voici un texte brut. Transformez-le en HTML correct avec deux paragraphes.

Texte : “Je m’entraîne au HTML. Je veux écrire des pages lisibles. Je vais utiliser des balises adaptées.”

Correction

<p>Je m’entraîne au HTML. Je veux écrire des pages lisibles.</p>
<p>Je vais utiliser des balises adaptées.</p>

2.1.3 Mise en emphase (strong, em)

Les balises strong et em servent à marquer une emphase dans le texte.
Elles ne sont pas juste des équivalents de “gras” et “italique”. Elles portent un sens.

Ce que c’est

strong : emphase forte (importance)
em : emphase légère (insistance)

À quoi ça sert

signaler qu’un mot ou un groupe de mots est important
améliorer la compréhension
permettre aux lecteurs d’écran d’adapter la lecture (intonation, insistance)

Comment le navigateur l’interprète
Le navigateur comprend que le texte doit être mis en valeur.
Par défaut, il l’affiche souvent :

strong en gras
em en italique
Mais le plus important est la signification : importance vs insistance.

Ce qui est correct

utiliser strong pour une information réellement importante
utiliser em pour insister sur un mot dans une phrase

Exemples corrects :

<p>Respectez toujours la structure de base d’un document HTML.</p>
<p>Vous devez <strong>toujours</strong> écrire le doctype.</p>
<p>Vous pouvez <em>vraiment</em> améliorer la lisibilité avec des paragraphes.</p>

Ce qui est incorrect

utiliser strong pour mettre en gras “au hasard”
mettre des phrases entières en strong sans raison
utiliser em comme décoration visuelle uniquement

Exemple incorrect :

<p><strong>Bienvenue sur mon site personnel et voici tout mon texte en gras</strong></p>

Problème :

vous signalez une importance forte sur tout le texte, ce qui n’a plus de sens

Explication ligne par ligne d’un exemple correct

<p>Vous devez <strong>toujours</strong> écrire le doctype.</p>

p : paragraphe
strong : le mot “toujours” est signalé comme particulièrement important
le navigateur et les outils d’accessibilité comprennent que ce terme est à accentuer

Exercice 3 – Ajouter l’emphase correctement

Consignes
Réécrivez ce paragraphe en ajoutant :

strong sur le mot “obligatoire”
em sur le mot “progressivement”

Phrase : “Le doctype est obligatoire. Vous devez apprendre le HTML progressivement.”

Correction

<p>Le doctype est <strong>obligatoire</strong>. Vous devez apprendre le HTML <em>progressivement</em>.</p>

2.2 Liens et images

2.2.1 Liens internes et externes

La balise a (anchor) sert à créer un lien hypertexte.
Un lien permet de naviguer d’une ressource à une autre : une page web, un document, une section de page.

Ce que c’est

une balise qui crée un lien cliquable
elle doit contenir du texte (ou du contenu) visible, appelé “texte du lien”
l’attribut href indique la destination

À quoi ça sert

relier des pages entre elles
permettre la navigation
construire la structure d’un site
référencer des ressources externes

Comment le navigateur l’interprète
Le navigateur :

crée un élément de lien
rend son contenu cliquable
utilise href pour savoir où aller

Un lien sans href n’est pas un lien fonctionnel.

Ce qui est correct
Lien externe :

<a href="https://example.com">Visiter un site</a>

Lien interne (vers une autre page du même projet) :

<a href="contact.html">Contact</a>

Ce qui est incorrect

oublier href
mettre un href vide sans intention
écrire une URL brute sans balise

Exemples incorrects :

<a>Contact</a>

https://example.com

Explication ligne par ligne d’un lien correct

<a href="contact.html">Contact</a>

a : balise de lien
href="contact.html" : destination du lien
Contact : texte visible et cliquable

Exercice 4 – Créer deux liens corrects

Consignes
Écrivez :

un lien interne vers “about.html” avec le texte “À propos”
un lien externe vers “https://example.com” avec le texte “Site externe”

Correction

<a href="about.html">À propos</a>
<a href="https://example.com">Site externe</a>

2.2.2 Images et attribut alt

La balise img sert à afficher une image dans la page.

Ce que c’est

une balise dite “vide” : elle n’a pas de contenu entre ouverture et fermeture
elle fonctionne grâce à des attributs, notamment src et alt

À quoi ça sert

intégrer un média visuel dans le contenu
illustrer une information
améliorer la compréhension d’une page

Comment le navigateur l’interprète
Le navigateur :

lit l’attribut src pour trouver le fichier image
tente de charger ce fichier
l’affiche si le chargement réussit
utilise alt si l’image ne peut pas être affichée ou si l’utilisateur utilise un lecteur d’écran

Ce qui est correct
Exemple :

<img src="photo.jpg" alt="Portrait en noir et blanc d’une personne souriante">

Ce qui est incorrect

oublier alt
mettre un alt vide sans raison
utiliser alt comme légende décorative
mettre “image” ou “photo” dans alt sans décrire réellement

Exemple incorrect :

<img src="photo.jpg">

<img src="photo.jpg" alt="image">

Explication ligne par ligne d’un exemple correct

<img src="photo.jpg" alt="Portrait en noir et blanc d’une personne souriante">

img : insertion d’une image
src : chemin vers l’image
alt : texte alternatif descriptif, utile si l’image ne s’affiche pas et pour l’accessibilité

Exercice 5 – Ajouter une image accessible

Consignes
Écrivez une balise image pour afficher “logo.png”.
Le texte alternatif doit décrire précisément : “Logo de l’entreprise Formation Studio”.

Correction

<img src="logo.png" alt="Logo de l’entreprise Formation Studio">

2.2.3 Organisation et lisibilité du code

À partir du moment où vous commencez à écrire plusieurs éléments (titres, paragraphes, liens, images), la lisibilité du code devient un objectif central.
Un HTML illisible vous ralentit immédiatement, et rend les corrections difficiles.

Ce que c’est
Un ensemble de pratiques qui rendent votre code :

lisible
structuré
facile à corriger
cohérent

À quoi ça sert

éviter les erreurs
comprendre rapidement la structure d’une page
faciliter le travail en équipe
rendre le débogage plus simple

Comment le navigateur l’interprète
Le navigateur se fiche en grande partie de votre indentation.
Il peut interpréter un code très mal présenté.
Mais vous, en tant que développeur, vous devez écrire un code lisible pour éviter les erreurs.

Ce qui est correct

indenter les éléments enfants
passer à la ligne pour séparer les blocs
garder un ordre logique : titres puis paragraphes, liens après le texte, etc.

Exemple lisible :

<h1>Mon site</h1>

<p>Bienvenue sur mon site.</p>

<a href="contact.html">Contact</a>

<img src="photo.jpg" alt="Portrait en noir et blanc d’une personne souriante">

Ce qui est incorrect

tout écrire sur une ligne
mélanger les blocs sans séparation
rendre la structure impossible à lire

Exemple illisible :

<h1>Mon site</h1><p>Bienvenue sur mon site.</p><a href="contact.html">Contact</a><img src="photo.jpg" alt="Portrait en noir et blanc d’une personne souriante">

Explication ligne par ligne d’un exemple lisible

<h1>Mon site</h1>

un titre principal, isolé visuellement dans le code

<p>Bienvenue sur mon site.</p>

un paragraphe placé après, ce qui correspond à l’ordre logique de lecture

<a href="contact.html">Contact</a>

un lien de navigation placé en bloc distinct, lisible

<img src="photo.jpg" alt="Portrait en noir et blanc d’une personne souriante">

une image avec un texte alternatif descriptif, directement lisible dans le code

Exercice 6 – Rendre un code lisible

Consignes
Réécrivez le code suivant pour qu’il soit lisible et correctement présenté.

<h1>Mon site</h1><p>Bienvenue</p><a href="about.html">A propos</a><img src="logo.png" alt="logo">

Correction

<h1>Mon site</h1>

<p>Bienvenue</p>

<a href="about.html">A propos</a>

<img src="logo.png" alt="Logo de l’entreprise Formation Studio">

Exercices de révision cumulée – HTML (Parties 1 et 2)

Exercice 1 – Créer la page d’un profil personnel

Objectif pédagogique

Revoir la structure HTML de base, la hiérarchie des titres, les paragraphes et les listes.

Consignes

Vous devez créer une page HTML complète présentant une personne fictive.

La page devra contenir :

une structure HTML valide (<!DOCTYPE html>, <html>, <head>, <body>)
un titre principal avec le nom de la personne
une section de présentation avec un paragraphe
une liste non ordonnée de compétences ou de centres d’intérêt
une hiérarchie de titres logique

Aucun CSS n’est demandé. Concentrez-vous uniquement sur le HTML.

Correction

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Profil personnel</title>
  </head>
  <body>
    <h1>Alex Martin</h1>

    <h2>Présentation</h2>
    <p>Alex est une personne passionnée par le web et la création numérique.</p>

    <h2>Compétences</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>Design</li>
      <li>Photographie</li>
    </ul>
  </body>
</html>

Exercice 2 – Structurer un article de blog

Objectif pédagogique

Utiliser les balises sémantiques et structurer un contenu éditorial.

Consignes

Vous devez créer la structure d’un article de blog en respectant la sémantique HTML.

La page devra contenir :

un header avec le titre du blog
un main contenant un article
dans l’article : un titre, deux sections avec titres et paragraphes
un footer avec une mention de copyright

Utilisez les balises sémantiques appropriées.

Correction

<header>
  <h1>Mon blog tech</h1>
</header>

<main>
  <article>
    <h2>Apprendre le HTML</h2>

    <section>
      <h3>Pourquoi apprendre le HTML</h3>
      <p>Le HTML est la base de toute page web.</p>
    </section>

    <section>
      <h3>Par où commencer</h3>
      <p>Il est important de comprendre la structure avant le style.</p>
    </section>
  </article>
</main>

<footer>
  <p>© 2026 Mon blog</p>
</footer>

Exercice 3 – Créer une page de restaurant

Objectif pédagogique

Combiner listes, structure sémantique et hiérarchie des titres.

Consignes

Créez une page HTML pour un restaurant fictif.

La page devra contenir :

un header avec le nom du restaurant
une section de présentation
une section menu avec :
- une liste non ordonnée pour les plats
- une liste ordonnée pour un menu dégustation
un footer avec les informations de contact

Correction

<header>
  <h1>Le Bistrot du Web</h1>
</header>

<main>
  <section>
    <h2>Présentation</h2>
    <p>Un restaurant moderne inspiré par le monde du numérique.</p>
  </section>

  <section>
    <h2>Menu</h2>

    <h3>À la carte</h3>
    <ul>
      <li>Salade HTML</li>
      <li>Pasta CSS</li>
      <li>Burger JavaScript</li>
    </ul>

    <h3>Menu dégustation</h3>
    <ol>
      <li>Entrée</li>
      <li>Plat</li>
      <li>Dessert</li>
    </ol>
  </section>
</main>

<footer>
  <p>Contact : contact@bistrotduweb.fr</p>
</footer>

Exercice 4 – Corriger une page mal structurée

Objectif pédagogique

Analyser un HTML existant et appliquer les bonnes pratiques.

Consignes

Voici une page mal structurée. Corrigez-la pour :

utiliser des balises sémantiques
respecter la hiérarchie des titres
améliorer la lisibilité du document

Code de départ

<div>
  <h3>Mon site</h3>
  <div>
    <h1>Accueil</h1>
    <p>Bienvenue</p>
  </div>
</div>

Correction

<header>
  <h1>Mon site</h1>
</header>

<main>
  <section>
    <h2>Accueil</h2>
    <p>Bienvenue</p>
  </section>
</main>

Exercice 5 – Projet ludique : page de fan fictive

Objectif pédagogique

Mobiliser l’ensemble des notions vues : structure, sémantique, listes, hiérarchie.

Consignes

Choisissez un univers fictif ou réel (film, série, artiste, jeu vidéo).

Créez une page HTML contenant :

un header avec le nom de l’univers
une section de présentation
une section avec une liste de personnages, chansons ou éléments clés
une section avec un classement ou des étapes (liste ordonnée)
un footer

Organisez votre contenu de manière logique et lisible.

Correction

<header>
  <h1>Univers Star Code</h1>
</header>

<main>
  <section>
    <h2>Présentation</h2>
    <p>Star Code est une saga fictive inspirée du développement web.</p>
  </section>

  <section>
    <h2>Personnages principaux</h2>
    <ul>
      <li>HTML Solo</li>
      <li>CSS Skywalker</li>
      <li>JavaScript Vader</li>
    </ul>
  </section>

  <section>
    <h2>Épisodes préférés</h2>
    <ol>
      <li>L’espoir du HTML</li>
      <li>L’attaque du CSS</li>
      <li>Le retour du JavaScript</li>
    </ol>
  </section>
</main>

<footer>
  <p>Page fan réalisée à des fins pédagogiques</p>
</footer>

3. HTML sémantique et structuration

Jusqu’à présent, vous avez appris à écrire du HTML qui fonctionne : la page s’affiche, le contenu est visible, la structure de base est correcte.
À partir de maintenant, l’objectif change : il ne s’agit plus seulement que la page fonctionne, mais qu’elle ait du sens.

Le HTML sémantique consiste à utiliser des balises qui décrivent le rôle des différentes parties de la page, et pas seulement leur apparence ou leur position.
Grâce à ces balises, le navigateur, les moteurs de recherche et les outils d’accessibilité peuvent comprendre comment la page est organisée, quelle est l’information principale, et quels contenus sont secondaires.

3.1 Balises sémantiques principales

3.1.1 header, main, footer

Une page web n’est pas un bloc uniforme. Elle est composée de grandes zones, chacune ayant une fonction précise.
Les balises header, main et footer servent précisément à identifier ces zones.

Lorsqu’un navigateur rencontre ces balises, il comprend immédiatement :

où commence l’introduction de la page
où se trouve le contenu principal
où se situent les informations de fin ou secondaires

La balise header représente la zone d’en-tête.
On y trouve généralement ce qui introduit la page ou le site : un titre principal, un logo, parfois une navigation.
Le navigateur interprète ce bloc comme une zone introductive, liée soit à la page entière, soit à une section particulière.

La balise main représente le cœur de la page.
Elle contient le contenu principal, celui pour lequel la page existe.
Il ne doit y avoir qu’un seul main par page, car le navigateur et les lecteurs d’écran s’appuient sur cette balise pour identifier le point central de lecture.

La balise footer marque la fin logique de la page ou d’une section.
Elle contient des informations complémentaires : mentions, copyright, liens secondaires, informations de contact.
Le navigateur comprend que ce contenu n’est pas prioritaire par rapport au contenu principal.

Exemple de structure cohérente :

<header>
  <h1>Mon site</h1>
  <nav>
    <a href="index.html">Accueil</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

<main>
  <h2>Bienvenue</h2>
  <p>Voici le contenu principal de la page.</p>
</main>

<footer>
  <p>© 2026 Mon site</p>
</footer>

Dans cet exemple :

le navigateur identifie clairement une zone d’introduction
il repère sans ambiguïté le contenu principal
il comprend que le pied de page contient des informations secondaires

À l’inverse, certaines erreurs cassent complètement cette logique.
Utiliser plusieurs main, ou placer du contenu principal dans un footer, rend la page confuse pour les outils de lecture.

Exemple incorrect :

<main>
  <p>Menu</p>
</main>

<main>
  <p>Contenu principal</p>
</main>

Ici, le navigateur ne sait plus quel est le vrai contenu central de la page.

Exercice 1 – Structurer une page avec header, main et footer

Consignes
Écrivez la structure HTML d’une page contenant :

un en-tête avec un titre h1 “Portfolio”
un contenu principal avec un titre h2 “Projets” et un paragraphe
un pied de page avec un paragraphe “© 2026”

Correction

<header>
  <h1>Portfolio</h1>
</header>

<main>
  <h2>Projets</h2>
  <p>Voici une sélection de mes projets.</p>
</main>

<footer>
  <p>© 2026</p>
</footer>

3.1.2 section, article, nav, aside

À l’intérieur des grandes zones de la page, il est nécessaire de structurer le contenu plus finement.
C’est le rôle des balises section, article, nav et aside.

Une section permet de regrouper un ensemble de contenus autour d’un même thème.
Le navigateur comprend qu’il s’agit d’une partie identifiable du document, souvent introduite par un titre.

Un article correspond à un contenu autonome.
Il doit pouvoir être compris indépendamment du reste de la page : un article de blog, une actualité, une fiche.
Lorsqu’un navigateur ou un outil d’analyse rencontre un article, il sait que ce bloc a un sens propre.

La balise nav sert exclusivement à regrouper des liens de navigation.
Son rôle est très clair : indiquer que les liens qu’elle contient servent à se déplacer dans le site ou dans la page.
Les lecteurs d’écran utilisent cette information pour proposer des raccourcis de navigation.

La balise aside sert à isoler un contenu secondaire.
Il est lié au contenu principal, mais n’en fait pas partie directement : encart, informations complémentaires, suggestions.

Exemple cohérent :

<main>
  <h1>Blog</h1>

  <section>
    <h2>Derniers articles</h2>

    <article>
      <h3>Apprendre le HTML</h3>
      <p>Voici les bases pour commencer.</p>
    </article>

    <article>
      <h3>Comprendre la sémantique</h3>
      <p>Structurer une page avec du HTML clair.</p>
    </article>
  </section>

  <aside>
    <h2>À lire aussi</h2>
    <p>Ressources complémentaires.</p>
  </aside>
</main>

Dans cette structure :

le navigateur identifie une section thématique
chaque article est reconnu comme un contenu autonome
l’aside est clairement perçu comme secondaire

Utiliser ces balises de manière incorrecte casse la logique du document.
Par exemple, placer le contenu principal dans un aside ou utiliser article pour un simple paragraphe rend la structure incohérente.

Exercice 2 – Choisir la bonne balise sémantique

Consignes
Indiquez la balise la plus adaptée pour chaque situation.

Une liste de liens “Accueil”, “Projets”, “Contact”
Un post de blog complet avec un titre et du texte
Une zone “À propos de l’auteur” à côté du contenu principal
Un regroupement thématique “Services” contenant plusieurs blocs

Correction

nav
article
aside
section

3.1.3 Différence avec div

La balise div est une balise générique.
Elle n’indique absolument rien sur le rôle du contenu qu’elle contient.

Lorsque le navigateur rencontre une div, il sait seulement qu’il s’agit d’un conteneur.
Il ne peut pas déterminer s’il s’agit d’une navigation, d’un contenu principal ou d’un élément secondaire.

Cela ne signifie pas que div est inutile.
Elle est indispensable lorsque aucune balise sémantique ne correspond réellement au besoin.
Mais utiliser div partout, par habitude ou par facilité, appauvrit considérablement la structure du document.

Exemple où l’utilisation de div est justifiée :

<section>
  <h2>Produits</h2>

  <div>
    <h3>Produit A</h3>
    <p>Description</p>
  </div>

  <div>
    <h3>Produit B</h3>
    <p>Description</p>
  </div>
</section>

Ici, la section donne le sens global. Les div servent uniquement de conteneurs internes.

À l’inverse, une page construite uniquement avec des div devient illisible, aussi bien pour les humains que pour les machines.

Exercice 3 – Remplacer des div par des balises sémantiques

Consignes
Remplacez les div par les balises sémantiques adaptées : header, nav, main, footer.

<div>
  <div>
    <h1>Mon site</h1>
    <div>
      <a href="index.html">Accueil</a>
      <a href="contact.html">Contact</a>
    </div>
  </div>

  <div>
    <h2>Bienvenue</h2>
    <p>Contenu principal.</p>
  </div>

  <div>
    <p>© 2026</p>
  </div>
</div>

Correction

<header>
  <h1>Mon site</h1>
  <nav>
    <a href="index.html">Accueil</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

<main>
  <h2>Bienvenue</h2>
  <p>Contenu principal.</p>
</main>

<footer>
  <p>© 2026</p>
</footer>

3.2 Architecture d’une page web

3.2.1 Structure globale d’une page moderne

Une page web moderne est construite comme un document structuré.
Chaque zone a une fonction claire, et cette fonction est exprimée directement dans le HTML.

Une structure classique comprend :

un en-tête avec la navigation
un contenu principal organisé en sections et articles
éventuellement un contenu secondaire
un pied de page

Lorsque le navigateur analyse une telle page, il obtient une hiérarchie claire, exploitable par tous les outils.

Exercice 4 – Écrire une structure de page moderne

Consignes
Écrivez la structure d’une page “Portfolio” avec :

un header contenant un titre
une navigation avec deux liens
un main contenant une section “Présentation”
un footer avec un paragraphe

Correction

<header>
  <h1>Portfolio</h1>
  <nav>
    <a href="projets.html">Projets</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

<main>
  <section>
    <h2>Présentation</h2>
    <p>Bienvenue sur mon portfolio.</p>
  </section>
</main>

<footer>
  <p>© 2026</p>
</footer>

3.2.2 Navigation et organisation du contenu

La navigation structure l’expérience utilisateur.
Un bon HTML sémantique permet à l’utilisateur de comprendre immédiatement où il se trouve et comment se déplacer.

Regrouper les liens de navigation dans une balise nav permet :

au navigateur de distinguer navigation et contenu
aux lecteurs d’écran de proposer des raccourcis
au code de rester clair et lisible

À l’inverse, mélanger navigation et contenu principal rend la page confuse et difficile à utiliser.

Exemple correct :

<nav>
  <a href="index.html">Accueil</a>
  <a href="projets.html">Projets</a>
  <a href="contact.html">Contact</a>
</nav>

Exercices longs de consolidation – Partie 3

Durée totale possible : 1h30 à 2h30

Exercice 1 – Analyse et reconstruction sémantique

Objectif pédagogique
Apprendre à lire un HTML existant, comprendre sa logique implicite, et le restructurer correctement en HTML sémantique.

Consignes
On vous donne le HTML suivant, issu d’un site existant.
Il fonctionne visuellement, mais il n’utilise aucune balise sémantique.

Lisez attentivement le code
Identifiez :
- la zone d’en-tête
- la navigation
- le contenu principal
- les informations secondaires
Réécrivez tout le HTML en utilisant :
- header
- nav
- main
- section
- footer
Vous devez conserver le contenu, mais améliorer uniquement la structure.

Code de départ :

<div>
  <div>
    <h1>Agence Créative</h1>
    <div>
      <a href="index.html">Accueil</a>
      <a href="services.html">Services</a>
      <a href="contact.html">Contact</a>
    </div>
  </div>

  <div>
    <h2>Notre expertise</h2>
    <p>Nous accompagnons les marques.</p>
  </div>

  <div>
    <p>© 2026 Agence Créative</p>
  </div>
</div>

Correction possible :

<header>
  <h1>Agence Créative</h1>
  <nav>
    <a href="index.html">Accueil</a>
    <a href="services.html">Services</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

<main>
  <section>
    <h2>Notre expertise</h2>
    <p>Nous accompagnons les marques.</p>
  </section>
</main>

<footer>
  <p>© 2026 Agence Créative</p>
</footer>

Exercice 2 – Conception complète d’une page sémantique

Objectif pédagogique
Passer de zéro à une page HTML structurée, sans modèle imposé.

Consignes
Vous devez concevoir la structure HTML complète d’un site de photographe.

La page doit contenir :

un header avec :
- un h1 (nom du photographe)
- une nav avec 3 liens
un main avec :
- une section “Présentation”
- une section “Galeries”
  - contenant 2 article, chacun avec un h3 et un paragraphe
un aside “Infos pratiques”
un footer avec copyright

Contraintes :

indentation claire
hiérarchie correcte des titres
aucune div inutile

Correction possible (exemple) :

<header>
  <h1>Jean Dupont – Photographe</h1>
  <nav>
    <a href="index.html">Accueil</a>
    <a href="galeries.html">Galeries</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

<main>
  <section>
    <h2>Présentation</h2>
    <p>Photographe spécialisé en portrait et reportage.</p>
  </section>

  <section>
    <h2>Galeries</h2>

    <article>
      <h3>Portraits</h3>
      <p>Séances en studio et en extérieur.</p>
    </article>

    <article>
      <h3>Reportages</h3>
      <p>Événementiel et documentaire.</p>
    </article>
  </section>
</main>

<aside>
  <h2>Infos pratiques</h2>
  <p>Basé à Marseille.</p>
</aside>

<footer>
  <p>© 2026 Jean Dupont</p>
</footer>

Exercice 3 – Section ou article ? Justifier ses choix

Objectif pédagogique
Forcer la compréhension fine de la différence entre section et article.

Consignes
Pour chaque cas ci-dessous :

Choisissez la balise adaptée (section ou article)
Justifiez votre choix en une ou deux phrases

Cas :

Une page “Actualités” listant plusieurs posts
Un post de blog complet
Une partie “Services” avec plusieurs offres
Une fiche produit indépendante
Une page “À propos” unique

Correction

section – elle regroupe plusieurs contenus liés
article – contenu autonome
section – regroupement thématique
article – contenu indépendant
section – contenu non autonome hors contexte

Exercice 4 – Réorganisation selon la logique utilisateur

Objectif pédagogique
Comprendre que la sémantique sert aussi la lecture humaine.

Consignes
Voici le contenu d’une page, sans structure.
Vous devez :

Déterminer l’ordre logique de lecture
Proposer une structure HTML sémantique complète

Contenu :

Nom du site
Liens : Accueil, Blog, Contact
Texte de présentation
Liste de 3 articles
Encart “Newsletter”
Mentions légales

Correction possible :

<header>
  <h1>Mon site</h1>
  <nav>
    <a href="#">Accueil</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
  </nav>
</header>

<main>
  <section>
    <h2>Présentation</h2>
    <p>Bienvenue sur mon site.</p>
  </section>

  <section>
    <h2>Derniers articles</h2>

    <article>
      <h3>Article 1</h3>
    </article>

    <article>
      <h3>Article 2</h3>
    </article>

    <article>
      <h3>Article 3</h3>
    </article>
  </section>
</main>

<aside>
  <h2>Newsletter</h2>
</aside>

<footer>
  <p>Mentions légales</p>
</footer>

Exercice 5 – Audit sémantique critique

Objectif pédagogique
Savoir expliquer pourquoi une structure est mauvaise.

Consignes
Analysez le code suivant.
Listez au moins 5 problèmes sémantiques.

<div>
  <div>Menu</div>
  <div>Accueil</div>
  <div>Blog</div>

  <div>
    <div>Bienvenue</div>
    <div>Contenu principal</div>
  </div>

  <div>© 2026</div>
</div>

Correction (exemples de problèmes) :

absence totale de balises sémantiques
navigation non identifiée
contenu principal non identifiable
hiérarchie de titres inexistante
footer non identifié
structure illisible pour un lecteur d’écran

Exercice 6 – Mini-projet libre guidé

Objectif pédagogique
Mobiliser toutes les notions vues de manière autonome.

Consignes
Choisissez un thème parmi :

site personnel
restaurant
association
événement

Réalisez la structure HTML complète de la page d’accueil avec :

header + nav
main avec au moins 2 section
au moins 1 article
1 aside
footer

Contraintes :

titres hiérarchisés
balises sémantiques pertinentes
code lisible
aucune anticipation (pas de CSS, pas de JS)

Correction
La correction se fait par :

comparaison entre élèves
discussion sur les choix de balises
validation de la logique globale

4. Contenus avancés et médias

Jusqu’ici, vous avez appris à structurer une page et à organiser son contenu principal.
Dans cette partie, vous allez enrichir ce contenu avec des éléments très présents dans les pages réelles : listes, contenus éditoriaux et médias.

Ces éléments ne sont pas neutres. Lorsqu’ils sont mal utilisés, le navigateur perd une partie de la structure logique du document. Lorsqu’ils sont bien utilisés, ils renforcent la compréhension, l’accessibilité et la lisibilité globale de la page.

4.1 Listes et éléments structurants

4.1.1 Listes ordonnées et non ordonnées

Une liste est un ensemble d’éléments qui partagent un lien logique.
En HTML, une liste n’est pas simplement “du texte mis à la ligne avec des tirets”. C’est une structure que le navigateur reconnaît comme un groupe cohérent.

Le navigateur distingue deux grands cas :

les listes dont l’ordre n’a pas de valeur particulière
les listes dont l’ordre est porteur de sens

Lorsque l’ordre des éléments n’a aucune importance, on utilise une liste non ordonnée.
Le navigateur comprend alors qu’il s’agit d’un ensemble d’éléments équivalents, sans hiérarchie interne.

Exemple correct :

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Le navigateur interprète ce code comme :

un groupe unique
composé de trois éléments distincts
sans relation d’ordre logique entre eux

Lorsque l’ordre est important, on utilise une liste ordonnée.
Dans ce cas, le navigateur comprend qu’il s’agit d’une séquence, d’un enchaînement logique.

Exemple correct :

<ol>
  <li>Créer le fichier HTML</li>
  <li>Ajouter la structure de base</li>
  <li>Écrire le contenu</li>
</ol>

Ici, le navigateur comprend que :

chaque élément dépend du précédent
changer l’ordre changerait le sens

Une erreur fréquente consiste à simuler une liste avec des paragraphes ou des retours à la ligne.
Visuellement, cela peut sembler acceptable, mais structurellement le navigateur ne comprend plus qu’il s’agit d’un ensemble.

Exemple incorrect :

<p>- HTML</p>
<p>- CSS</p>
<p>- JavaScript</p>

Autre erreur fréquente : oublier les li.
Sans li, il n’y a pas de liste valide, même si le navigateur tente parfois d’afficher quelque chose.

Exercice 1 – Choisir le bon type de liste

Consignes
Indiquez pour chaque situation s’il est plus pertinent d’utiliser une liste ordonnée ou non ordonnée.

Une liste d’ingrédients
Les étapes d’une recette
Une liste de liens vers des réseaux sociaux
Un tutoriel en plusieurs étapes
Une liste de compétences

Correction

Liste non ordonnée
Liste ordonnée
Liste non ordonnée
Liste ordonnée
Liste non ordonnée

Exercice 2 – Écrire des listes structurées

Consignes
Écrivez :

une liste non ordonnée contenant 4 éléments liés à la formation web
une liste ordonnée décrivant 3 étapes logiques de création d’une page HTML

Contraintes :

chaque élément doit être dans un li
indentation lisible

Correction possible :

<ul>
  <li>Structure HTML</li>
  <li>Balises sémantiques</li>
  <li>Accessibilité</li>
  <li>Lisibilité du code</li>
</ul>

<ol>
  <li>Créer le fichier HTML</li>
  <li>Définir la structure du document</li>
  <li>Ajouter le contenu</li>
</ol>

4.1.2 Citations et contenus éditoriaux

Dans un contenu éditorial, toutes les phrases n’ont pas le même statut.
Une citation est un texte rapporté, issu d’une autre source, ou mis en valeur comme tel. Elle n’a pas le même rôle qu’un paragraphe classique.

Le HTML propose une balise dédiée pour ce type de contenu : blockquote.

Lorsqu’un navigateur rencontre une balise blockquote, il comprend que :

le texte qu’elle contient est une citation
ce contenu a une origine ou un statut particulier
il doit être traité comme un bloc distinct du texte principal

Exemple correct :

<blockquote>
  <p>Un bon HTML décrit le sens avant l’apparence.</p>
</blockquote>

Le paragraphe est conservé à l’intérieur, car une citation reste du texte structuré.
Le navigateur peut appliquer une mise en forme par défaut, mais surtout, il conserve l’information sémantique.

Une erreur fréquente consiste à utiliser de simples guillemets dans un paragraphe.
Visuellement, cela fonctionne, mais le navigateur ne sait pas qu’il s’agit d’une citation.

Exemple pauvre sémantiquement :

<p>"Un bon HTML décrit le sens avant l’apparence."</p>

Autre erreur : détourner blockquote pour créer un effet visuel de retrait.
Si le texte n’est pas une citation, la balise est mal utilisée.

Exercice 3 – Structurer un contenu éditorial

Consignes
À partir des éléments suivants, écrivez un HTML correct :

Titre : “Structurer son HTML”
Paragraphe : “Le HTML permet d’organiser l’information.”
Citation : “La structure améliore la compréhension.”

Contraintes :

le titre doit être en h2
la citation doit utiliser blockquote
la citation doit contenir un paragraphe

Correction :

<h2>Structurer son HTML</h2>
<p>Le HTML permet d’organiser l’information.</p>

<blockquote>
  <p>La structure améliore la compréhension.</p>
</blockquote>

4.2 Médias et figures

4.2.1 Images avancées

Une image n’est pas qu’un élément visuel.
Pour le navigateur, une image est un contenu à part entière, qui peut être compris ou ignoré selon la manière dont elle est décrite.

À chaque image, le navigateur associe :

un fichier à charger (src)
un texte alternatif (alt)

Le texte alternatif est fondamental.
Il permet au navigateur de transmettre l’information de l’image lorsque :

l’image ne s’affiche pas
l’utilisateur utilise un lecteur d’écran

Une image informative doit toujours avoir un alt descriptif.

Exemple correct :

<img src="plan-ville.png" alt="Plan simplifié du centre-ville de Marseille">

Ici, le navigateur dispose d’une information équivalente au contenu visuel.

Dans certains cas précis, une image est purement décorative.
Dans ce cas, on peut volontairement indiquer un alt vide, pour signaler au navigateur que l’image ne porte pas d’information.

Exemple :

<img src="decor.svg" alt="">

Ce choix doit être conscient.
Oublier alt ou écrire un texte vague est une mauvaise pratique.

Exemple incorrect :

<img src="photo.jpg" alt="image">

Exercice 4 – Rédiger des textes alternatifs pertinents

Consignes
Écrivez la balise img correspondante pour chaque situation :

Photo montrant “Un bureau avec un ordinateur portable” (src : bureau.jpg)
Logo de l’entreprise “Formation Studio” (src : logo.png)
Image purement décorative de fond (src : fond.svg)

Correction :

<img src="bureau.jpg" alt="Un bureau avec un ordinateur portable">
<img src="logo.png" alt="Logo de l’entreprise Formation Studio">
<img src="fond.svg" alt="">

4.2.2 figure et figcaption

Lorsqu’un média est accompagné d’une légende explicative, il est important que le navigateur comprenne que ces deux éléments vont ensemble.
C’est exactement le rôle de la balise figure.

Une figure regroupe :

un média (image, vidéo, etc.)
une légende décrite avec figcaption

Le navigateur interprète cet ensemble comme une unité logique.
Cela améliore :

la lecture
l’accessibilité
la compréhension du document

Exemple correct :

<figure>
  <img src="vieux-port.jpg" alt="Vue du Vieux-Port de Marseille">
  <figcaption>Le Vieux-Port est un lieu emblématique de Marseille.</figcaption>
</figure>

Une erreur fréquente consiste à placer la légende dans un paragraphe séparé.
Visuellement, cela peut fonctionner, mais la relation sémantique est perdue.

Autre erreur : utiliser figcaption sans figure.
La légende n’a alors plus de support logique.

Exercice 5 – Associer image et légende correctement

Consignes
Transformez l’image et le texte suivants en une structure sémantique correcte :

Image : photo-mer.jpg
Description de l’image : “Vue de la mer depuis la corniche”
Légende : “La corniche offre une vue dégagée sur la Méditerranée.”

Correction :

<figure>
  <img src="photo-mer.jpg" alt="Vue de la mer depuis la corniche">
  <figcaption>La corniche offre une vue dégagée sur la Méditerranée.</figcaption>
</figure>

4.2.3 Vidéo et audio

Le HTML permet d’intégrer directement des médias interactifs comme la vidéo et l’audio.
Contrairement aux images, ces éléments peuvent être contrôlés par l’utilisateur.

Les balises video et audio indiquent au navigateur qu’il doit :

charger un média temporel
proposer des contrôles de lecture
gérer la lecture, la pause, le volume

Exemple de vidéo :

<video controls>
  <source src="presentation.mp4">
</video>

Exemple audio :

<audio controls>
  <source src="podcast.mp3">
</audio>

Le navigateur affiche des contrôles par défaut.
Sans l’attribut controls, l’utilisateur n’a aucun moyen d’interagir avec le média.

Erreur fréquente : intégrer un média sans contrôles ou sans source valide.

Exercice 6 – Intégrer un média HTML

Consignes
Écrivez :

une balise video avec contrôles pour le fichier demo.mp4
une balise audio avec contrôles pour le fichier intro.mp3

Correction :

<video controls>
  <source src="demo.mp4">
</video>

<audio controls>
  <source src="intro.mp3">
</audio>

Exercices de synthèse – HTML (parties 1 à 4)

Ces exercices mobilisent uniquement les notions vues dans les parties suivantes :

Partie 1 : structure du document HTML, head, body, bonnes pratiques
Partie 2 : titres, paragraphes, emphase, liens, images
Partie 3 : HTML sémantique et structuration
Partie 4 : listes, citations, médias, figure, audio et vidéo

Exercice 1 – Reconstruction complète d’un document HTML

Objectif
Être capable de construire un document HTML complet, valide, lisible et sémantique à partir d’un contenu brut.

Consignes
Vous disposez du contenu suivant :

Nom du site : “Atelier Créatif”
Navigation : Accueil / Projets / Contact
Texte de présentation : “Bienvenue sur le site de l’atelier.”
Liste de 3 services :
- Création graphique
- Photographie
- Illustration
Citation : “La créativité se travaille.”
Image : atelier.jpg (photo montrant un atelier de création)
Légende : “Vue de l’atelier en activité”
Mention de fin : “© 2026 Atelier Créatif”

Travail demandé
Écrivez un document HTML complet contenant :

le doctype
la structure html, head, body
une structure sémantique cohérente
une liste adaptée
une citation correcte
une image avec texte alternatif et légende
une indentation lisible

Correction possible

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Atelier Créatif</title>
  </head>
  <body>

    <header>
      <h1>Atelier Créatif</h1>
      <nav>
        <a href="index.html">Accueil</a>
        <a href="projets.html">Projets</a>
        <a href="contact.html">Contact</a>
      </nav>
    </header>

    <main>
      <section>
        <h2>Présentation</h2>
        <p>Bienvenue sur le site de l’atelier.</p>
      </section>

      <section>
        <h2>Services</h2>
        <ul>
          <li>Création graphique</li>
          <li>Photographie</li>
          <li>Illustration</li>
        </ul>
      </section>

      <blockquote>
        <p>La créativité se travaille.</p>
      </blockquote>

      <figure>
        <img src="atelier.jpg" alt="Atelier de création en activité">
        <figcaption>Vue de l’atelier en activité</figcaption>
      </figure>
    </main>

    <footer>
      <p>© 2026 Atelier Créatif</p>
    </footer>

  </body>
</html>

Exercice 2 – Structurer un contenu éditorial long

Objectif
Savoir structurer un texte long avec une hiérarchie claire et des balises adaptées.

Consignes
Créez une page “Article de blog” contenant :

un titre principal
une introduction
deux sections thématiques
dans chaque section :
- un titre
- un paragraphe
une citation intégrée
un lien externe

Correction possible

<article>
  <h1>Pourquoi structurer son HTML</h1>

  <p>Le HTML est la base de toute page web.</p>

  <section>
    <h2>Une question de lisibilité</h2>
    <p>Un code bien structuré est plus facile à comprendre.</p>
  </section>

  <section>
    <h2>Une question de sens</h2>
    <p>La structure aide le navigateur et l’utilisateur.</p>
  </section>

  <blockquote>
    <p>Un bon HTML se lit avant de se voir.</p>
  </blockquote>

  <p>
    Pour aller plus loin, consultez
    <a href="https://developer.mozilla.org">la documentation HTML</a>.
  </p>
</article>

Exercice 3 – Audit et correction de structure

Objectif
Savoir analyser un HTML existant et corriger sa structure sémantique.

Consignes
Analysez le code suivant, puis :

identifiez au moins 5 erreurs ou mauvaises pratiques
réécrivez le code en version corrigée

Code de départ

<div>
  <div>Mon site</div>
  <div>
    <div>Accueil</div>
    <div>Blog</div>
  </div>

  <div>
    <div>Bienvenue</div>
    <div>Ceci est le contenu</div>
  </div>

  <div>© 2026</div>
</div>

Correction possible

<header>
  <h1>Mon site</h1>
  <nav>
    <a href="#">Accueil</a>
    <a href="#">Blog</a>
  </nav>
</header>

<main>
  <h2>Bienvenue</h2>
  <p>Ceci est le contenu</p>
</main>

<footer>
  <p>© 2026</p>
</footer>

Exercice 4 – Organisation du contenu par listes et sections

Objectif
Choisir la structure HTML la plus adaptée selon le type de contenu.

Consignes
Structurez une page “Formation Web” contenant :

une présentation
une liste de prérequis (3 éléments)
une liste ordonnée des étapes de la formation (4 étapes)
une section “Ressources” avec 2 liens

Correction possible

<section>
  <h2>Présentation</h2>
  <p>Cette formation vous apprend les bases du web.</p>
</section>

<section>
  <h2>Prérequis</h2>
  <ul>
    <li>Ordinateur</li>
    <li>Navigateur web</li>
    <li>Motivation</li>
  </ul>
</section>

<section>
  <h2>Étapes de la formation</h2>
  <ol>
    <li>Découvrir le HTML</li>
    <li>Structurer une page</li>
    <li>Ajouter du contenu</li>
    <li>Améliorer la lisibilité</li>
  </ol>
</section>

<section>
  <h2>Ressources</h2>
  <ul>
    <li><a href="https://developer.mozilla.org">MDN Web Docs</a></li>
    <li><a href="https://www.w3.org">W3C</a></li>
  </ul>
</section>

Exercice 5 – Intégration raisonnée de médias

Objectif
Utiliser correctement images, figures et médias audio/vidéo.

Consignes
Créez une section “Médias” contenant :

une image informative avec un texte alternatif pertinent
une image avec légende utilisant figure et figcaption
une vidéo avec contrôles
un audio avec contrôles

Correction possible

<section>
  <h2>Médias</h2>

  <img src="ordinateur.jpg" alt="Ordinateur portable affichant du code HTML">

  <figure>
    <img src="classe.jpg" alt="Salle de formation avec des élèves">
    <figcaption>Session de formation HTML</figcaption>
  </figure>

  <video controls>
    <source src="presentation.mp4">
  </video>

  <audio controls>
    <source src="intro.mp3">
  </audio>
</section>

Exercice 6 – Mini-projet de synthèse

Objectif
Mobiliser l’ensemble des notions vues dans les parties 1 à 4.

Consignes
Réalisez la page d’accueil d’un site au choix (personnel, association, événement, restaurant).

La page doit contenir :

un document HTML complet
une structure sémantique cohérente
au minimum :
- 2 sections
- 1 article
- 1 liste
- 1 citation
- 1 image avec légende
- 1 lien externe
une indentation propre et lisible

5. Formulaires et interaction utilisateur

Un formulaire HTML n’est pas “juste un bloc avec des champs”. C’est une interface structurée qui permet au navigateur de :

comprendre quelles informations sont attendues
associer ces informations à des noms exploitables (name)
guider l’utilisateur (types, contraintes, aides)
vérifier certaines règles avant envoi (validation native)
préparer un envoi de données lors de la soumission

Vous devez retenir une idée essentielle : le navigateur n’invente rien. Il applique strictement ce que vous décrivez.
Si votre formulaire est flou (pas de name, labels absents, types incohérents), le navigateur ne peut ni aider l’utilisateur, ni produire un envoi fiable.

5.1 Structure des formulaires

5.1.1 Balise form

La balise form délimite une zone où plusieurs champs sont regroupés pour être envoyés ensemble. Sans form, vous pouvez afficher des champs, mais vous perdez le mécanisme standard de soumission et la logique d’ensemble.

Deux attributs structurent le comportement d’un formulaire :

action : indique la destination de l’envoi. Le navigateur enverra les données vers cette URL.
method : indique comment le navigateur envoie les données. Dans ce cours, vous utilisez surtout get, car c’est observable dans l’URL lors de tests.

La différence entre get et post

GET envoie les données dans l’URL, visibles et adaptées aux recherches ou filtres (non sécurisé).
POST envoie les données de façon invisible dans la requête et nécessite toujours un traitement côté serveur (PHP, JS etc)

Exemple minimal :

<form action="resultat.html" method="get">
  <label>Email</label>
  <input type="email" name="email">
  <button>Envoyer</button>
</form>

Ce que le navigateur comprend :

tout champ à l’intérieur du form appartient à la même soumission
au clic sur le bouton, il collecte les valeurs des champs nommés
il prépare une requête vers resultat.html

Erreurs fréquentes :

placer des champs hors du form et croire qu’ils seront envoyés
imbriquer des formulaires (un form dans un autre) : le HTML devient invalide et le comportement devient imprévisible
oublier action et ne plus savoir où part l’envoi

Exemple incorrect (bouton en dehors du formulaire) :

<form action="resultat.html" method="get">
  <label>Email</label>
  <input type="email" name="email">
</form>

<button>Envoyer</button>

Ici, le bouton n’a pas de raison d’envoyer le formulaire, car il n’en fait pas partie.

Exercice 1 – Formulaire “propre” minimal + test d’envoi

Consignes
Créez une page HTML complète et ajoutez un formulaire minimal, puis testez son comportement dans le navigateur.

Créez un document HTML complet avec title et meta charset.
Dans le body, créez un formulaire avec :

action="resultat.html"
method="get"
un champ email nommé email
un bouton “Envoyer”

Test :

ouvrez la page dans le navigateur
remplissez le champ et soumettez
observez l’URL générée (les paramètres)

Contraintes :

code indenté
un label visible
un name présent

Correction possible :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Test formulaire</title>
  </head>
  <body>
    <form action="resultat.html" method="get">
      <label>Email</label>
      <input type="email" name="email">
      <button>Envoyer</button>
    </form>
  </body>
</html>

5.1.2 Champs de saisie

Les champs sont les éléments qui collectent une valeur. Le navigateur associe à chaque champ :

un type de saisie (texte, email, date, etc.)
une valeur saisie (ou sélectionnée)
et, si le champ participe à l’envoi, une clé (name)

Sans name, un champ peut exister à l’écran, mais il n’est pas identifié dans les données envoyées.
Un formulaire sérieux ne contient jamais de champ sans name si la valeur doit être récupérée.

Exemple correct :

<input type="text" name="prenom">

Exemple incorrect (champ “muet” à l’envoi) :

<input type="text">

Vous devez aussi faire attention à l’ordre des champs : un formulaire est une interface.
Même sans CSS, vous devez produire un HTML compréhensible : labels, champs, bouton, dans un ordre logique.

Exercice 2 – Formulaire d’inscription lisible

Consignes
Créez un formulaire d’inscription contenant :

prénom (texte)
nom (texte)
email (email, obligatoire)
mot de passe (password, obligatoire)
bouton “S’inscrire”

Contraintes :

chaque champ a un label visible
chaque champ a un name cohérent
utilisez required sur email et mot de passe
method="get" et action="inscription.html"

Correction possible :

<form action="inscription.html" method="get">
  <label>Prénom</label>
  <input type="text" name="prenom">

  <label>Nom</label>
  <input type="text" name="nom">

  <label>Email</label>
  <input type="email" name="email" required>

  <label>Mot de passe</label>
  <input type="password" name="motdepasse" required>

  <button>S’inscrire</button>
</form>

5.1.3 Boutons et envoi

Dans un formulaire, la soumission déclenche la collecte des valeurs et la préparation d’une requête.
Le navigateur cherche un élément capable de soumettre le formulaire. Le plus clair dans vos pages est button.

Un bouton placé dans un form déclenche la soumission.
Si le bouton est en dehors, il ne déclenche rien, sauf si vous utilisez des mécanismes que vous ne voyez pas encore (et que vous n’utiliserez pas dans ce cours).

Exemple correct :

<form action="resultat.html" method="get">
  <label>Recherche</label>
  <input type="text" name="q">
  <button>Rechercher</button>
</form>

Erreurs fréquentes :

bouton hors form
plusieurs boutons sans intention claire
oublier que le bouton n’est pas “un décor” mais une action

Exercice 3 – Formulaire de recherche + contrainte obligatoire

Consignes
Créez un formulaire “Recherche” :

champ texte name="q"
placeholder “Tapez votre recherche”
champ obligatoire (required)
bouton “Rechercher”
action="recherche.html" et method="get"

Test :

essayez de soumettre sans rien saisir
observez la réaction du navigateur

Correction possible :

<form action="recherche.html" method="get">
  <label>Recherche</label>
  <input type="text" name="q" placeholder="Tapez votre recherche" required>
  <button>Rechercher</button>
</form>

5.2 Types de champs et attributs

5.2.1 Inputs courants

Le type d’un input indique au navigateur le genre de valeur attendu.
Cela influence :

le contrôle affiché
l’aide à la saisie
la validation native

Voici des types essentiels que vous devez connaître et savoir choisir.

Texte, email, mot de passe, nombre

Exemples :

<input type="text" name="prenom">
<input type="email" name="email">
<input type="password" name="motdepasse">
<input type="number" name="age">

Le navigateur :

traite email comme une adresse email et peut refuser un format manifestement invalide
masque l’affichage avec password
encadre la saisie avec number

Erreurs fréquentes :

utiliser text pour tout et perdre l’aide du navigateur
mettre number pour des valeurs qui ne sont pas des quantités (ex : téléphone), ce qui crée des contraintes absurdes

Date, color, range

Ces types produisent des contrôles spécifiques selon le navigateur :

<input type="date" name="date">
<input type="color" name="couleur">
<input type="range" name="volume" min="0" max="100" step="10">

Le navigateur peut afficher :

un sélecteur de date
un sélecteur de couleur
un curseur pour range

Note importante : l’apparence dépend du navigateur, mais la logique reste la même : une valeur associée à un nom.

Checkbox et radio

Ces deux types ont une logique différente d’un champ texte : vous ne “tapez” pas une valeur, vous sélectionnez un état.

Checkbox : choix indépendant (coché / non coché).
Radio : choix exclusif dans un groupe.

Exemple checkbox :

<label>
  <input type="checkbox" name="newsletter" checked>
  Recevoir la newsletter
</label>

checked indique l’état initial
si la case n’est pas cochée, le navigateur n’envoie généralement pas de valeur pour ce champ

Exemple radio (groupe) :

<p>Choisissez votre formule :</p>

<label>
  <input type="radio" name="formule" value="standard" checked>
  Standard
</label>

<label>
  <input type="radio" name="formule" value="premium">
  Premium
</label>

Point crucial :

les radios appartiennent au même groupe parce qu’ils partagent le même name
value est indispensable : c’est la valeur envoyée si le radio est sélectionné

Erreurs fréquentes :

radios avec des name différents : le navigateur les laisse tous sélectionnables
radios sans value : vous perdez l’information envoyée
utiliser checkbox quand la sélection doit être exclusive

file et hidden

file permet de sélectionner un fichier.
Dans ce cours, vous ne traiterez pas l’upload côté serveur, mais vous devez connaître la balise et comprendre son rôle dans l’interface.

<input type="file" name="piece_jointe">

hidden permet d’envoyer une valeur sans champ visible.
C’est souvent utilisé pour envoyer un contexte ou une information technique.

<input type="hidden" name="source" value="landing-page">

Erreurs fréquentes :

utiliser hidden pour cacher une donnée “importante” à l’utilisateur (mauvaise approche)
oublier value sur un champ hidden

Exercice 4 – Formulaire “préférences” complet

Consignes
Créez un formulaire “Préférences utilisateur” avec :

Un champ date de naissance (date) name="naissance"
Un curseur de volume (range) name="volume" avec :

min 0
max 100
step 5

Un choix de thème (radio) name="theme" avec :

Clair (value="clair", sélectionné par défaut)
Sombre (value="sombre")

Une option newsletter (checkbox) name="newsletter" cochée par défaut
Un champ fichier name="avatar" pour choisir un avatar
Un champ hidden name="source" avec value="exercice4"
Un bouton “Enregistrer”

Contraintes :

chaque zone doit être introduite par un texte lisible (label ou paragraphe)
chaque input doit avoir un name
les radios doivent partager le même name
les radios doivent avoir un value

Correction possible :

<form action="preferences.html" method="get">
  <label>Date de naissance</label>
  <input type="date" name="naissance">

  <label>Volume</label>
  <input type="range" name="volume" min="0" max="100" step="5">

  <p>Choisissez votre thème :</p>
  <label>
    <input type="radio" name="theme" value="clair" checked>
    Clair
  </label>
  <label>
    <input type="radio" name="theme" value="sombre">
    Sombre
  </label>

  <label>
    <input type="checkbox" name="newsletter" checked>
    Recevoir la newsletter
  </label>

  <label>Avatar</label>
  <input type="file" name="avatar">

  <input type="hidden" name="source" value="exercice4">

  <button>Enregistrer</button>
</form>

5.2.2 Attributs indispensables (name, value, checked, selected, disabled, readonly, pattern, min, max, step, autocomplete)

Les attributs ne sont pas des détails. Ce sont des instructions directes données au navigateur, qui modifient :

ce que l’utilisateur peut faire
ce que le navigateur envoie
ce que le navigateur valide

value

value définit :

la valeur envoyée pour certains champs (radio, hidden, etc.)
une valeur initiale possible

Exemple radio indispensable :

<input type="radio" name="formule" value="premium">

Exemple hidden :

<input type="hidden" name="source" value="landing-page">

checked et selected

checked initialise une case ou un radio comme sélectionné.
selected initialise une option choisie dans une liste déroulante (vous le verrez plus loin avec select).

Exemple checkbox :

<input type="checkbox" name="cgu" checked>

disabled et readonly

disabled désactive le champ : il ne peut pas être modifié et il n’est généralement pas envoyé.
readonly empêche la modification mais laisse le champ lisible et généralement envoyé.

Exemple :

<input type="text" name="code" value="ABC123" readonly>
<input type="text" name="ancien" value="inactif" disabled>

Erreurs fréquentes :

utiliser disabled alors que vous voulez simplement empêcher une modification (dans ce cas, readonly est souvent plus cohérent)
désactiver un champ puis s’étonner que la valeur ne soit pas envoyée

pattern

pattern permet d’imposer un format via une expression régulière.
L’idée n’est pas d’entrer dans les mathématiques des regex, mais de comprendre le principe : le navigateur vérifie un format.

Exemple simple : un code postal français (5 chiffres) :

<input type="text" name="code_postal" pattern="[0-9]{5}" placeholder="75001">

Le navigateur refusera une valeur qui ne correspond pas exactement à 5 chiffres.

min, max, step

Ces attributs encadrent les champs numériques (number) ou le curseur (range).

Exemple :

<input type="number" name="age" min="0" max="120" step="1">

Vous imposez ici :

pas en-dessous de 0
pas au-dessus de 120
pas de décimales

autocomplete

autocomplete guide le navigateur pour proposer des valeurs déjà connues (remplissage automatique).
C’est un gain énorme de confort utilisateur.

Exemple :

<input type="email" name="email" autocomplete="email">

Même sans connaître toutes les valeurs possibles, vous devez retenir que :

activer autocomplete améliore l’expérience
vous ne devez pas le désactiver sans raison

Exercice 5 – Formulaire “compte utilisateur” avec contraintes

Consignes
Créez un formulaire “Créer un compte” qui respecte les contraintes suivantes :

Champs :

Email :

type email
name email
required
autocomplete email

Mot de passe :

type password
name motdepasse
required
pattern : au moins 8 caractères (indice : utilisez {8,})

Âge :

type number
name age
min 13
max 120
step 1

Code promo :

type text
name codepromo
readonly
value BIENVENUE2026

Acceptation des CGU :

checkbox
name cgu
required

Bouton “Créer le compte”

Contraintes :

un label visible pour chaque champ
indentation et lisibilité
le formulaire doit avoir action="compte.html" et method="get"

Correction possible :

<form action="compte.html" method="get">
  <label>Email</label>
  <input type="email" name="email" required autocomplete="email">

  <label>Mot de passe</label>
  <input type="password" name="motdepasse" required pattern=".{8,}">

  <label>Âge</label>
  <input type="number" name="age" min="13" max="120" step="1">

  <label>Code promo</label>
  <input type="text" name="codepromo" value="BIENVENUE2026" readonly>

  <label>
    <input type="checkbox" name="cgu" required>
    J’accepte les conditions d’utilisation
  </label>

  <button>Créer le compte</button>
</form>

5.2.3 textarea, select, option, optgroup, fieldset, legend

Les formulaires ne se résument pas à input.
Certaines saisies ne sont pas adaptées à un champ texte simple.

textarea

textarea sert à saisir un texte long sur plusieurs lignes (message, commentaire).

<label>Message</label>
<textarea name="message" placeholder="Votre message"></textarea>

Contrairement à input, on n’utilise pas value de la même manière : le contenu peut être placé entre les balises, mais dans ce cours vous utiliserez surtout un champ vide.

Erreurs fréquentes :

utiliser un input type="text" pour un message long
oublier name, et perdre le message à l’envoi

select, option, optgroup

select crée une liste déroulante. Les choix sont définis par option.
Le navigateur envoie la value de l’option sélectionnée.

<label>Ville</label>
<select name="ville">
  <option value="marseille">Marseille</option>
  <option value="paris">Paris</option>
  <option value="lyon">Lyon</option>
</select>

optgroup permet de regrouper des options par catégorie.

<label>Langue</label>
<select name="langue">
  <optgroup label="Courant">
    <option value="fr">Français</option>
    <option value="en">Anglais</option>
  </optgroup>
  <optgroup label="Autres">
    <option value="es">Espagnol</option>
    <option value="it">Italien</option>
  </optgroup>
</select>

L’attribut selected permet de choisir une option par défaut.

fieldset et legend

fieldset regroupe des champs liés. legend donne un titre à ce groupe.
C’est un outil important pour la compréhension, notamment en accessibilité.

Exemple :

<fieldset>
  <legend>Informations de contact</legend>

  <label>Email</label>
  <input type="email" name="email">

  <label>Téléphone</label>
  <input type="text" name="telephone">
</fieldset>

Erreurs fréquentes :

créer des formulaires longs sans regroupement, difficiles à comprendre
oublier legend, ce qui rend le groupe moins explicite

Exercice 6 – Formulaire “demande de devis” structuré

Consignes
Vous devez produire un formulaire complet “Demande de devis” pour un atelier.

Le formulaire doit être structuré en deux groupes avec fieldset et legend.

Groupe 1 : Informations personnelles

prénom (text, required, autocomplete given-name)
nom (text, required, autocomplete family-name)
email (email, required, autocomplete email)

Groupe 2 : Demande

type de demande (select name="demande") avec deux groupes :
- optgroup “Bijoux” : Bague (value="bague"), Pendentif (value="pendentif")
- optgroup “Autre” : Réparation (value="reparation"), Conseil (value="conseil")
- option par défaut : Conseil sélectionnée
budget (number) :
- name budget
- min 50
- max 2000
- step 50
délai (radio) name="delai" avec values :
- urgent (value="urgent")
- standard (value="standard", coché par défaut)
message (textarea, required, placeholder)
un champ hidden name="source" value fil-rouge
bouton “Envoyer la demande”

Contraintes :

form action="devis.html" method="get"
labels visibles partout
indentation parfaite
tous les champs ont un name
utiliser required là où demandé

Correction possible :

<form action="devis.html" method="get">
  <fieldset>
    <legend>Informations personnelles</legend>

    <label>Prénom</label>
    <input type="text" name="prenom" required autocomplete="given-name">

    <label>Nom</label>
    <input type="text" name="nom" required autocomplete="family-name">

    <label>Email</label>
    <input type="email" name="email" required autocomplete="email">
  </fieldset>

  <fieldset>
    <legend>Votre demande</legend>

    <label>Type de demande</label>
    <select name="demande">
      <optgroup label="Bijoux">
        <option value="bague">Bague</option>
        <option value="pendentif">Pendentif</option>
      </optgroup>
      <optgroup label="Autre">
        <option value="reparation">Réparation</option>
        <option value="conseil" selected>Conseil</option>
      </optgroup>
    </select>

    <label>Budget estimé</label>
    <input type="number" name="budget" min="50" max="2000" step="50">

    <p>Délai souhaité :</p>
    <label>
      <input type="radio" name="delai" value="urgent">
      Urgent
    </label>
    <label>
      <input type="radio" name="delai" value="standard" checked>
      Standard
    </label>

    <label>Message</label>
    <textarea name="message" placeholder="Décrivez votre demande" required></textarea>

    <input type="hidden" name="source" value="fil-rouge">

    <button>Envoyer la demande</button>
  </fieldset>
</form>

Exercices de synthèse – HTML (parties 1 à 5)

Exercice 1 – Mini-jeu : création de personnage (jeu de rôle)

Objectif pédagogique

Concevoir une page HTML complète combinant contenu éditorial, structuration logique et formulaire complexe.

Consignes détaillées

Vous devez créer une page permettant à un utilisateur de créer un personnage pour un jeu de rôle imaginaire.

La page doit être lisible sans mise en forme et organisée de façon claire.

Résultat attendu

La page doit comporter :

1. Une zone d’en-tête contenant :
- le nom du jeu
- une navigation interne permettant d’accéder aux différentes parties de la page
2. Une section expliquant le principe du jeu :
- plusieurs paragraphes
- une liste de règles
- une phrase présentée comme une citation ou une devise du jeu
3. Une section centrale permettant à l’utilisateur :
- de renseigner l’identité de son personnage
- de faire un choix unique parmi plusieurs possibilités
- de faire plusieurs choix indépendants
- de choisir une origine parmi des propositions regroupées par catégories
- de transmettre une information non visible liée au contexte du jeu
4. Une section illustrée :
- une image liée au jeu
- un texte expliquant ce que représente cette image
5. Un pied de page simple.

Correction (HTML complet)

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Jeu de rôle – Création de personnage</title>
  </head>
  <body>

    <header>
      <h1>Création de personnage</h1>
      <nav>
        <a href="#regles">Règles</a>
        <a href="#creation">Création</a>
        <a href="#illustration">Illustration</a>
      </nav>
    </header>

    <main>
      <section id="regles">
        <h2>Règles du jeu</h2>
        <p>Vous créez un personnage destiné à évoluer dans un monde imaginaire.</p>
        <p>Les choix effectués influencent son histoire et ses capacités.</p>

        <ul>
          <li>Un personnage possède une identité unique.</li>
          <li>Une seule classe peut être choisie.</li>
          <li>L’équipement est cumulable.</li>
          <li>L’origine influence le scénario.</li>
        </ul>

        <blockquote>
          <p>Chaque aventure commence par un choix.</p>
        </blockquote>
      </section>

      <section id="creation">
        <h2>Création</h2>

        <form action="personnage.html" method="get">
          <fieldset>
            <legend>Identité</legend>

            <label>Nom</label>
            <input type="text" name="nom" required>

            <label>Âge</label>
            <input type="number" name="age" min="10" max="99">
          </fieldset>

          <fieldset>
            <legend>Choix</legend>

            <p>Classe</p>
            <label><input type="radio" name="classe" value="guerrier" checked> Guerrier</label>
            <label><input type="radio" name="classe" value="mage"> Mage</label>
            <label><input type="radio" name="classe" value="voleur"> Voleur</label>

            <label>Origine</label>
            <select name="origine">
              <optgroup label="Royaumes">
                <option value="nord">Nord</option>
                <option value="sud">Sud</option>
              </optgroup>
              <optgroup label="Terres sauvages">
                <option value="foret">Forêt</option>
                <option value="desert">Désert</option>
              </optgroup>
            </select>

            <p>Équipement</p>
            <label><input type="checkbox" name="equipement" value="epee"> Épée</label>
            <label><input type="checkbox" name="equipement" value="arc"> Arc</label>
            <label><input type="checkbox" name="equipement" value="baton"> Bâton</label>

            <input type="hidden" name="univers" value="fantasy">

            <button>Créer le personnage</button>
          </fieldset>
        </form>
      </section>

      <section id="illustration">
        <h2>Illustration</h2>
        <figure>
          <img src="personnage.jpg" alt="Illustration d’un personnage de jeu de rôle">
          <figcaption>Exemple de héros prêt pour l’aventure.</figcaption>
        </figure>
      </section>
    </main>

    <footer>
      <p>© Jeu HTML</p>
    </footer>

  </body>
</html>

Exercice 2 – Réservation d’un événement culturel

Objectif pédagogique

Créer une page informative combinant contenu éditorial, hiérarchie et formulaire réaliste.

Consignes détaillées

Vous devez créer une page permettant de réserver une place pour un événement culturel.

La page doit :

présenter l’événement
informer l’utilisateur
permettre une réservation claire et guidée

L’utilisateur doit pouvoir :

s’identifier
choisir une date
indiquer une quantité avec des limites
sélectionner un type d’événement
laisser un message libre

Correction (HTML complet)

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Réservation – Événement culturel</title>
  </head>
  <body>

    <header>
      <h1>Réservation d’événement</h1>
    </header>

    <main>
      <section>
        <h2>Présentation</h2>
        <p>Cet événement propose plusieurs formats de rencontres culturelles.</p>

        <ul>
          <li>Places limitées</li>
          <li>Inscription obligatoire</li>
          <li>Confirmation par email</li>
        </ul>
      </section>

      <section>
        <h2>Réserver une place</h2>

        <form action="reservation.html" method="get">
          <label>Nom</label>
          <input type="text" name="nom" required>

          <label>Email</label>
          <input type="email" name="email" required>

          <label>Date</label>
          <input type="date" name="date" required>

          <label>Nombre de places</label>
          <input type="number" name="places" min="1" max="10">

          <label>Type d’événement</label>
          <select name="type">
            <option value="conference">Conférence</option>
            <option value="atelier">Atelier</option>
            <option value="rencontre">Rencontre</option>
          </select>

          <label>Message</label>
          <textarea name="message"></textarea>

          <button>Réserver</button>
        </form>
      </section>
    </main>

    <footer>
      <p>© Organisation culturelle</p>
    </footer>

  </body>
</html>

Exercice 3 – Quiz de connaissances (sans JavaScript)

Objectif pédagogique

Utiliser les formulaires comme outil logique et structuré.

Consignes détaillées

Vous devez créer un quiz HTML.

Le quiz doit :

expliquer son fonctionnement
comporter plusieurs questions
proposer :
- une question à réponse unique
- une question à réponses multiples
- une question avec choix dans une liste

Chaque question doit être clairement séparée et compréhensible seule.

Correction (HTML complet)

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Quiz HTML</title>
  </head>
  <body>

    <header>
      <h1>Quiz de connaissances</h1>
    </header>

    <main>
      <form action="quiz.html" method="get">

        <section>
          <h2>Question 1</h2>
          <p>HTML est :</p>
          <label><input type="radio" name="q1" value="balisage" required> Un langage de balisage</label>
          <label><input type="radio" name="q1" value="programmation"> Un langage de programmation</label>
        </section>

        <section>
          <h2>Question 2</h2>
          <p>Quelles balises sont sémantiques ?</p>
          <label><input type="checkbox" name="q2" value="header"> header</label>
          <label><input type="checkbox" name="q2" value="main"> main</label>
          <label><input type="checkbox" name="q2" value="div"> div</label>
        </section>

        <section>
          <h2>Question 3</h2>
          <label>Balise utilisée pour afficher une image :</label>
          <select name="q3">
            <option value="img">img</option>
            <option value="figure">figure</option>
            <option value="picture">picture</option>
          </select>
        </section>

        <button>Envoyer le quiz</button>
      </form>
    </main>

  </body>
</html>

Exercice 4 – Demande de devis (atelier / prestation)

Objectif pédagogique

Construire une page crédible de demande de devis, combinant contenu éditorial structuré, listes, médias, et un formulaire avancé (choix uniques, choix multiples, sélection catégorisée, message long, contraintes de saisie).

Consignes détaillées

Vous devez créer une page HTML permettant à un utilisateur de demander un devis pour une prestation (ex : atelier créatif, réparation, service, accompagnement). Le sujet est libre, mais la page doit être réaliste et complète.

Résultat attendu

1. Présentation de la prestation
La page doit présenter clairement :

le service proposé (quel type de prestation, à qui ça s’adresse)
des exemples de demandes possibles
des informations pratiques (délais, modalités, limites éventuelles)

Cette partie doit contenir :

plusieurs paragraphes structurés
une liste de prestations possibles (liste simple)
une liste d’étapes du processus (liste ordonnée)
une courte citation qui résume l’esprit du service (phrase “mantra”)

2. Illustration de la prestation
La page doit inclure une zone illustrée :

une image représentant la prestation (source fictive acceptée)
une légende expliquant précisément ce que l’image illustre
un texte expliquant pourquoi cette illustration est pertinente

3. Formulaire de demande de devis
Le formulaire doit être structuré et doit permettre à l’utilisateur de fournir:

ses informations de contact (au minimum identité + moyen de réponse)
le type de prestation souhaitée via un choix dans une liste
un choix de “niveau d’urgence” où une seule option est possible
des options additionnelles où plusieurs choix sont possibles
un budget estimatif encadré par des limites (valeur minimum, maximum et pas)
un champ de message long (texte sur plusieurs lignes)
une information invisible pour tracer la provenance (ex : nom de la page, campagne, version)

Contraintes d’ergonomie et de qualité :

les informations doivent être regroupées de manière logique (contact d’un côté, demande de l’autre)
l’utilisateur doit comprendre chaque question sans ambiguïté
certaines informations doivent être obligatoires (contact + demande au minimum)
le navigateur doit guider l’utilisateur sur les erreurs (données manquantes ou format incohérent)
le code doit être clair et correctement indenté

Correction (HTML complet)

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Demande de devis – Atelier</title>
  </head>
  <body>

    <header>
      <h1>Demande de devis</h1>
      <nav>
        <a href="#presentation">Présentation</a>
        <a href="#exemples">Exemples</a>
        <a href="#formulaire">Formulaire</a>
      </nav>
    </header>

    <main>
      <section id="presentation">
        <h2>Présentation</h2>
        <p>Cette page vous permet de demander un devis pour une prestation réalisée sur mesure.</p>
        <p>Le but est de comprendre votre besoin, vos contraintes et le niveau d’urgence avant de proposer une estimation.</p>

        <blockquote>
          <p>Une demande claire permet un devis juste.</p>
        </blockquote>
      </section>

      <section id="exemples">
        <h2>Exemples de demandes</h2>
        <p>Voici quelques demandes fréquentes. Ces exemples vous aident à formuler votre besoin.</p>

        <ul>
          <li>Création d’une pièce sur mesure</li>
          <li>Réparation ou ajustement</li>
          <li>Conseil avant fabrication</li>
          <li>Petite série pour un événement</li>
        </ul>

        <p>Le déroulement d’une demande suit généralement ces étapes :</p>
        <ol>
          <li>Vous décrivez votre besoin</li>
          <li>Nous échangeons sur les contraintes</li>
          <li>Une estimation est proposée</li>
          <li>Validation et planification</li>
        </ol>

        <figure>
          <img src="atelier-prestation.jpg" alt="Espace de travail d’un atelier avec outils et pièces en cours de réalisation">
          <figcaption>Exemple d’environnement de travail : préparation et assemblage des pièces.</figcaption>
        </figure>

        <p>Cette image illustre un contexte réel de fabrication : elle permet de visualiser l’aspect manuel et la précision attendue.</p>
      </section>

      <section id="formulaire">
        <h2>Formulaire</h2>
        <p>Remplissez ce formulaire pour obtenir un devis. Les informations essentielles doivent être complètes pour permettre une réponse.</p>

        <form action="devis.html" method="get">
          <fieldset>
            <legend>Vos informations</legend>

            <label>Nom</label>
            <input type="text" name="nom" required>

            <label>Email</label>
            <input type="email" name="email" required>

            <label>Téléphone</label>
            <input type="text" name="telephone">
          </fieldset>

          <fieldset>
            <legend>Votre demande</legend>

            <label>Type de prestation</label>
            <select name="prestation" required>
              <optgroup label="Création">
                <option value="sur-mesure">Sur mesure</option>
                <option value="petite-serie">Petite série</option>
              </optgroup>
              <optgroup label="Service">
                <option value="reparation">Réparation</option>
                <option value="conseil">Conseil</option>
              </optgroup>
            </select>

            <p>Niveau d’urgence :</p>
            <label><input type="radio" name="urgence" value="faible" checked> Faible</label>
            <label><input type="radio" name="urgence" value="moyenne"> Moyenne</label>
            <label><input type="radio" name="urgence" value="haute"> Haute</label>

            <p>Options :</p>
            <label><input type="checkbox" name="options" value="rdv"> Rendez-vous</label>
            <label><input type="checkbox" name="options" value="livraison"> Livraison</label>
            <label><input type="checkbox" name="options" value="gravure"> Gravure</label>

            <label>Budget estimé</label>
            <input type="number" name="budget" min="50" max="3000" step="50">

            <label>Description</label>
            <textarea name="message" placeholder="Décrivez votre besoin le plus précisément possible" required></textarea>

            <input type="hidden" name="source" value="page-devis-v1">

            <button>Envoyer la demande</button>
          </fieldset>
        </form>
      </section>
    </main>

    <footer>
      <p>© Atelier – Demande de devis</p>
    </footer>

  </body>
</html>

Exercice 5 – Inscription à une newsletter intelligente (ludique, mais réaliste)

Objectif pédagogique

Créer une page de newsletter qui combine contenu éditorial, structure claire, et formulaire complet incluant préférences, choix multiples, consentement, et contraintes.

Consignes détaillées

Vous devez créer une page HTML permettant à un utilisateur de s’abonner à une newsletter.

La page doit être crédible : elle doit expliquer pourquoi s’inscrire, ce que l’utilisateur va recevoir, et comment gérer ses préférences.

Résultat attendu

1. Zone de présentation
La page doit inclure :

un titre principal clair
une courte introduction
une liste des bénéfices de l’inscription
une section “Ce que vous recevrez” sous forme d’article (contenu autonome)

2. Formulaire d’inscription
L’utilisateur doit pouvoir :

renseigner ses informations de contact
choisir une fréquence d’envoi avec un choix unique
sélectionner plusieurs thématiques
choisir un format de contenu préféré (liste déroulante)
laisser un commentaire optionnel
consentir explicitement à l’inscription (sans ce consentement, l’envoi doit être bloqué par le navigateur)
envoyer une information invisible indiquant la version du formulaire

Contraintes :

champs essentiels obligatoires
le formulaire doit être lisible et compréhensible sans CSS
les préférences doivent être regroupées logiquement
code indenté proprement

Correction (HTML complet)

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Newsletter – Inscription</title>
  </head>
  <body>

    <header>
      <h1>Inscription à la newsletter</h1>
      <nav>
        <a href="#presentation">Présentation</a>
        <a href="#contenu">Contenu</a>
        <a href="#inscription">Inscription</a>
      </nav>
    </header>

    <main>
      <section id="presentation">
        <h2>Pourquoi s’inscrire</h2>
        <p>Cette newsletter vous envoie des contenus sélectionnés et des informations utiles, sans spam.</p>

        <ul>
          <li>Ressources sélectionnées</li>
          <li>Conseils pratiques</li>
          <li>Annonces et dates importantes</li>
        </ul>
      </section>

      <article id="contenu">
        <h2>Ce que vous recevrez</h2>
        <p>Chaque édition contient une sélection de contenus, une recommandation et une annonce.</p>
        <p>Vous pouvez ajuster vos préférences lors de l’inscription.</p>
      </article>

      <section id="inscription">
        <h2>Inscription</h2>

        <form action="newsletter.html" method="get">
          <fieldset>
            <legend>Vos informations</legend>

            <label>Prénom</label>
            <input type="text" name="prenom" required>

            <label>Email</label>
            <input type="email" name="email" required>
          </fieldset>

          <fieldset>
            <legend>Préférences</legend>

            <p>Fréquence :</p>
            <label><input type="radio" name="frequence" value="hebdo" checked> Hebdomadaire</label>
            <label><input type="radio" name="frequence" value="mensuel"> Mensuelle</label>
            <label><input type="radio" name="frequence" value="occasionnel"> Occasionnelle</label>

            <p>Thématiques :</p>
            <label><input type="checkbox" name="themes" value="html"> HTML</label>
            <label><input type="checkbox" name="themes" value="ux"> UX</label>
            <label><input type="checkbox" name="themes" value="outils"> Outils</label>

            <label>Format préféré</label>
            <select name="format">
              <option value="court">Court (5 min)</option>
              <option value="moyen" selected>Moyen (10–15 min)</option>
              <option value="long">Long (20 min)</option>
            </select>

            <label>Commentaire (optionnel)</label>
            <textarea name="commentaire" placeholder="Dites ce que vous aimeriez recevoir"></textarea>

            <label>
              <input type="checkbox" name="consentement" required value="ok">
              J’accepte de recevoir la newsletter
            </label>

            <input type="hidden" name="version" value="newsletter-v1">

            <button>S’inscrire</button>
          </fieldset>
        </form>
      </section>
    </main>

    <footer>
      <p>© Newsletter</p>
    </footer>

  </body>
</html>

Exercice 6 – Signaler un bug sur un site imaginaire

Objectif pédagogique

Créer une page de “signalement” qui mélange contenu, listes, médias et formulaire structuré, en renforçant la clarté et la logique de lecture.

Consignes détaillées

Vous devez créer une page HTML d’un site imaginaire appelé “Bureau des plaintes”, où l’utilisateur peut signaler un problème rencontré.

La page doit être à la fois sérieuse et légèrement ludique.

Résultat attendu

1. Présentation
La page doit expliquer :

pourquoi signaler un bug est utile
quelles informations sont nécessaires pour traiter une demande
ce qui se passe après l’envoi

Cette partie doit contenir :

des paragraphes
une liste d’éléments à vérifier avant d’envoyer
une liste d’étapes expliquant le traitement

2. Section “Exemples de bugs” Vous devez inclure un petit encart contenant :

quelques exemples de problèmes typiques
une courte citation humoristique (mais propre)

3. Formulaire de signalement
L’utilisateur doit pouvoir :

indiquer son nom et son email
choisir une catégorie de bug parmi plusieurs regroupées (ex : affichage, navigation, formulaire, autre)
choisir un niveau de gravité avec un choix unique
indiquer des informations optionnelles (ex : page concernée, reproduction)
écrire une description détaillée
fournir une date à laquelle le bug a été vu
envoyer une information invisible indiquant “support-v1”
joindre un fichier (ex : capture d’écran) en option
soumettre le tout

Contraintes :

informations regroupées logiquement (identité, bug, détails)
certains champs essentiels doivent être obligatoires
le navigateur doit aider à la saisie (formats adaptés, champs requis)
code propre et lisible

Correction (HTML complet)

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Bureau des plaintes – Signalement</title>
  </head>
  <body>

    <header>
      <h1>Bureau des plaintes</h1>
      <nav>
        <a href="#infos">Infos</a>
        <a href="#exemples">Exemples</a>
        <a href="#signalement">Signalement</a>
      </nav>
    </header>

    <main>
      <section id="infos">
        <h2>Avant de signaler un bug</h2>
        <p>Un signalement utile contient des informations précises. Cela permet de comprendre le problème et de le corriger plus vite.</p>
        <p>Avant d’envoyer, vérifiez quelques points simples.</p>

        <ul>
          <li>Le problème est-il reproductible ?</li>
          <li>Avez-vous rechargé la page ?</li>
          <li>Le problème apparaît-il sur plusieurs pages ?</li>
          <li>Avez-vous noté la date et le contexte ?</li>
        </ul>

        <p>Voici le déroulement du traitement :</p>
        <ol>
          <li>Réception du signalement</li>
          <li>Analyse et reproduction</li>
          <li>Correction</li>
          <li>Retour à l’utilisateur</li>
        </ol>
      </section>

      <aside id="exemples">
        <h2>Exemples de bugs fréquents</h2>
        <ul>
          <li>Un bouton ne réagit pas</li>
          <li>Un lien renvoie vers la mauvaise page</li>
          <li>Un formulaire refuse un envoi sans explication</li>
        </ul>

        <blockquote>
          <p>Un bug n’est pas une fatalité : c’est une énigme mal rangée.</p>
        </blockquote>
      </aside>

      <section id="signalement">
        <h2>Signaler un bug</h2>
        <p>Remplissez ce formulaire pour envoyer un signalement. Les champs essentiels doivent être complétés.</p>

        <form action="support.html" method="get">
          <fieldset>
            <legend>Vos informations</legend>

            <label>Nom</label>
            <input type="text" name="nom" required>

            <label>Email</label>
            <input type="email" name="email" required>
          </fieldset>

          <fieldset>
            <legend>Détails du bug</legend>

            <label>Catégorie</label>
            <select name="categorie" required>
              <optgroup label="Interface">
                <option value="affichage">Affichage</option>
                <option value="navigation">Navigation</option>
              </optgroup>
              <optgroup label="Fonctionnement">
                <option value="formulaire">Formulaire</option>
                <option value="autre">Autre</option>
              </optgroup>
            </select>

            <p>Gravité :</p>
            <label><input type="radio" name="gravite" value="faible" checked> Faible</label>
            <label><input type="radio" name="gravite" value="moyenne"> Moyenne</label>
            <label><input type="radio" name="gravite" value="haute"> Haute</label>

            <label>Date d’observation</label>
            <input type="date" name="date">

            <label>Page concernée (optionnel)</label>
            <input type="text" name="page" placeholder="Ex : /contact">

            <label>Description détaillée</label>
            <textarea name="description" required placeholder="Expliquez ce que vous faisiez, ce que vous attendiez, et ce qui s’est produit"></textarea>

            <label>Capture d’écran (optionnel)</label>
            <input type="file" name="capture">

            <input type="hidden" name="source" value="support-v1">

            <button>Envoyer le signalement</button>
          </fieldset>
        </form>
      </section>
    </main>

    <footer>
      <p>© Support – Bureau des plaintes</p>
    </footer>

  </body>
</html>

6. Accessibilité, SEO et bonnes pratiques

Vous savez maintenant écrire une page HTML structurée, sémantique, avec du contenu, des médias et des formulaires.
À ce stade, une page peut “fonctionner” visuellement tout en étant problématique sur deux aspects essentiels :

elle peut être difficile ou impossible à utiliser pour une partie des utilisateurs (accessibilité)
elle peut être mal comprise par les moteurs de recherche (SEO), ou mal interprétée par les outils d’analyse

Dans cette partie, vous allez apprendre à écrire un HTML qui reste lisible pour le navigateur, mais aussi pour :

les lecteurs d’écran
la navigation clavier
les moteurs de recherche
les outils de validation et d’audit

L’objectif est simple : produire un code propre, robuste, et compréhensible même en dehors de l’affichage visuel.

6.1 Accessibilité de base

6.1.1 Texte alternatif

Une image est un contenu chargé par le navigateur, mais l’image elle-même n’est pas “lue” par un lecteur d’écran.
Le navigateur a donc besoin d’un équivalent textuel, qui sert dans deux situations très courantes :

l’image ne se charge pas (erreur réseau, fichier manquant)
l’utilisateur utilise un outil qui lit la page (lecteur d’écran)

Cet équivalent textuel est l’attribut alt sur la balise img.

Lorsque le navigateur rencontre :

<img src="classe.jpg" alt="Salle de formation avec des élèves devant des ordinateurs">

il associe à l’image :

une source à charger (src)
un texte alternatif utilisable comme remplacement (alt)

Ce texte alternatif est utilisé par :

les lecteurs d’écran, qui annoncent le contenu à l’utilisateur
l’affichage en cas d’échec de chargement
certains outils d’analyse (accessibilité, audit)

Une image informative doit avoir un alt descriptif et utile.
Le texte alternatif doit décrire ce que l’image apporte à la compréhension.

Exemple de bonne pratique :

<img src="plan-salle.png" alt="Plan des tables dans la salle : trois rangées de quatre postes">

Ici, le texte n’est pas “photo de plan”, mais une description exploitable.

Une image décorative ne doit pas parasiter la lecture.
Dans ce cas, un alt vide indique au navigateur que l’image n’a pas de contenu informatif.

Exemple correct dans un cas décoratif :

<img src="decor.svg" alt="">

Le navigateur comprend que :

l’image peut être ignorée par un lecteur d’écran
elle ne doit pas être annoncée

Erreurs fréquentes :

oublier alt : le navigateur n’a aucun texte de remplacement
mettre un texte vague comme “image” ou “photo” : cela n’aide personne
décrire des informations inutiles ou répétitives (exemple : “image de …” alors que le contexte est évident)

Exemple incorrect :

<img src="logo.png" alt="image">

Le navigateur a bien un texte, mais il ne donne aucune information.

6.1.2 Labels et champs accessibles

Un formulaire n’est pas accessible uniquement parce qu’il “fonctionne”.
Un utilisateur peut remplir un formulaire en cliquant, mais un lecteur d’écran doit pouvoir comprendre :

quel champ correspond à quelle information
dans quel ordre les champs apparaissent
ce qui est obligatoire

Le navigateur dispose d’un mécanisme standard pour associer un texte à un champ : la balise label.

Un label donne un nom stable au champ.
Contrairement au placeholder, il ne disparaît pas et il reste lisible dans toutes les situations.

Exemple correct :

<form action="resultat.html" method="get">
  <label>Prénom</label>
  <input type="text" name="prenom" required>

  <label>Email</label>
  <input type="email" name="email" required>

  <button>Envoyer</button>
</form>

Même si vous ne voyez pas le rendu final sans CSS, le navigateur comprend déjà :

le champ “prenom” a un libellé “Prénom”
le champ “email” a un libellé “Email”
certains champs sont obligatoires

Le placeholder doit être considéré comme une aide, pas comme un label.
Il disparaît au moment où l’utilisateur saisit, ce qui peut créer une perte de contexte.

Exemple risqué :

<input type="email" name="email" placeholder="Votre email" required>

Dans ce cas, si le placeholder est la seule indication, le champ devient ambigu une fois rempli.

Erreurs fréquentes :

un formulaire composé uniquement de placeholders
des champs sans name, donc sans donnée exploitable
des champs obligatoires sans indication claire, ce qui peut provoquer des erreurs à la soumission

Exemple incorrect :

<form action="resultat.html" method="get">
  <input type="text" placeholder="Prénom">
  <input type="email" placeholder="Email">
  <button>Envoyer</button>
</form>

Le navigateur peut afficher les champs, mais la structure est fragile :

absence de labels
pas de name
aucune information stable pour l’accessibilité

6.1.3 Hiérarchie des titres

La hiérarchie des titres n’est pas un détail visuel.
Pour le navigateur, les balises h1 à h6 définissent la structure du document, un peu comme un plan dans un document texte.

Cette hiérarchie est utilisée par :

les lecteurs d’écran (navigation par titres)
les moteurs de recherche (compréhension des sections)
les outils d’audit (détection de structure incohérente)

Un document cohérent contient généralement :

un h1 principal (souvent unique pour la page)
des h2 pour les sections principales
des h3 pour les sous-sections

Exemple correct :

<h1>Portfolio</h1>

<section>
  <h2>Présentation</h2>
  <p>Bienvenue sur mon portfolio.</p>
</section>

<section>
  <h2>Projets</h2>

  <article>
    <h3>Projet A</h3>
    <p>Description du projet.</p>
  </article>

  <article>
    <h3>Projet B</h3>
    <p>Description du projet.</p>
  </article>
</section>

Le navigateur comprend :

un titre principal
deux sections principales
des sous-titres au sein d’une section

Erreurs fréquentes :

sauter des niveaux sans logique (h1 puis h4)
multiplier les h1 au hasard
utiliser les titres uniquement pour “faire gros” (raison visuelle)

Exemple incorrect :

<h1>Accueil</h1>
<h4>Présentation</h4>
<h2>Projets</h2>

Le navigateur peut afficher, mais la structure logique est incohérente.

Exercice – Corriger une hiérarchie de titres incohérente

Consignes
Corrigez la hiérarchie suivante pour obtenir un plan logique :

un titre principal de page
deux sections principales
un sous-titre dans la deuxième section

Code de départ :

<h1>Mon site</h1>
<h4>Présentation</h4>
<h2>Projets</h2>
<h5>Projet 1</h5>

Correction possible :

<h1>Mon site</h1>

<h2>Présentation</h2>

<h2>Projets</h2>
<h3>Projet 1</h3>

6.2 SEO et qualité du code

6.2.1 Métadonnées SEO

Les moteurs de recherche ne voient pas une page comme un humain.
Ils analysent le code HTML, sa structure, et ses métadonnées pour comprendre :

le sujet de la page
son titre
un résumé éventuel
la langue
la qualité globale du document

Ces informations se trouvent principalement dans le head.

Le title est essentiel : il sert à nommer la page dans l’onglet du navigateur, mais aussi dans les résultats de recherche.

Exemple :

<head>
  <meta charset="UTF-8">
  <title>Portfolio – Projets et contact</title>
</head>

Une page sans titre explicite est moins claire :

pour l’utilisateur
pour le navigateur
pour le moteur de recherche

Une autre métadonnée très courante est la description.
Elle n’est pas toujours utilisée telle quelle, mais elle aide à résumer l’intention de la page.

Exemple :

<head>
  <meta charset="UTF-8">
  <title>Atelier Créatif</title>
  <meta name="description" content="Atelier Créatif : projets, services et contact.">
</head>

Erreurs fréquentes :

un title générique “Accueil” ou “Page”
oublier le meta charset
écrire une description vide, ou qui ne décrit pas réellement la page

Exemple incorrect :

<head>
  <title>Page</title>
</head>

Le navigateur s’en sort, mais la page est pauvre en informations utiles.

Exercice – Écrire un head propre et orienté SEO

Consignes
Écrivez un head complet contenant :

meta charset="UTF-8"
un title explicite pour une page “Contact – Atelier Créatif”
une meta description cohérente (une phrase)

Correction possible :

<head>
  <meta charset="UTF-8">
  <title>Contact – Atelier Créatif</title>
  <meta name="description" content="Contactez Atelier Créatif via notre formulaire et retrouvez nos informations principales.">
</head>

6.2.2 Structure sémantique

Un moteur de recherche analyse la structure de la page pour comprendre :

quelle partie est la navigation
quel contenu est principal
quelles parties sont secondaires
comment les sections s’organisent

Une page remplie de div peut s’afficher, mais elle est beaucoup plus difficile à interpréter automatiquement.

Une structure sémantique claire aide :

les lecteurs d’écran
les moteurs de recherche
les outils d’audit

Exemple cohérent :

<header>
  <h1>Atelier Créatif</h1>
  <nav>
    <a href="index.html">Accueil</a>
    <a href="projets.html">Projets</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

<main>
  <section>
    <h2>Présentation</h2>
    <p>Bienvenue sur le site de l’atelier.</p>
  </section>
</main>

<footer>
  <p>© 2026 Atelier Créatif</p>
</footer>

Erreurs fréquentes :

tout mettre dans des div
mettre la navigation dans le contenu principal sans séparation
multiplier les zones sans logique, ce qui rend l’analyse confuse

Exercice – Remplacer des div par une structure sémantique

Consignes
Réécrivez le code suivant avec une structure sémantique correcte :

remplacez les div par header, nav, main, footer
gardez le contenu
conservez la hiérarchie des titres

Code de départ :

<div>
  <div>
    <h1>Mon site</h1>
    <div>
      <a href="#">Accueil</a>
      <a href="#">Contact</a>
    </div>
  </div>

  <div>
    <h2>Bienvenue</h2>
    <p>Contenu principal.</p>
  </div>

  <div>
    <p>© 2026</p>
  </div>
</div>

Correction possible :

<header>
  <h1>Mon site</h1>
  <nav>
    <a href="#">Accueil</a>
    <a href="#">Contact</a>
  </nav>
</header>

<main>
  <h2>Bienvenue</h2>
  <p>Contenu principal.</p>
</main>

<footer>
  <p>© 2026</p>
</footer>

6.2.3 Validation et nettoyage du code

Un code HTML peut fonctionner et pourtant contenir des erreurs.
Les navigateurs sont tolérants : ils tentent d’interpréter et de corriger, mais cela entraîne parfois des résultats incohérents.

Valider et nettoyer son code consiste à :

fermer correctement les balises
respecter l’imbrication logique
éviter les répétitions inutiles
maintenir une indentation cohérente
supprimer les éléments inutiles ou mal placés

Un exemple typique de problème est l’imbrication incohérente :

<p>
  Texte
  <h2>Titre</h2>
</p>

Ici, un titre ne doit pas être à l’intérieur d’un paragraphe.
Le navigateur va tenter de corriger, mais vous perdez le contrôle de la structure.

Un autre exemple fréquent est l’oubli d’une fermeture, ou un document trop compact :

<ul><li>HTML<li>CSS</ul>

Le navigateur peut afficher une liste, mais le code est incorrect et difficile à maintenir.

Un code propre est un code :

lisible
cohérent
validable facilement
compréhensible par le navigateur sans correction implicite

Exercices de synthèse – HTML (parties 1 à 6)

Ces exercices sont des travaux pratiques de fin de formation, mobilisant l’ensemble des notions vues dans les parties 1 à 6, avec un accent particulier sur l’accessibilité, le SEO et la qualité du code.

Exercice 1 – Audit complet et amélioration d’une page HTML existante

Objectif
Apprendre à analyser une page HTML fonctionnelle mais mal écrite, et l’améliorer sur les plans :

structure
accessibilité
SEO
lisibilité du code

Consignes
Voici une page HTML existante.
Elle s’affiche correctement dans un navigateur, mais elle contient de nombreux problèmes.

Vous devez :

analyser le code
identifier les problèmes liés :
- à l’accessibilité
- à la hiérarchie des titres
- aux images
- au SEO
- à la structure sémantique
réécrire une version améliorée et propre

Code de départ :

<html>
<head>
<title>Page</title>
</head>
<body>
<div>
<div>Mon site</div>
<div>
<div>Accueil</div>
<div>Contact</div>
</div>
<img src="photo.jpg">
<div>
<div>Bienvenue</div>
<p>Contenu principal</p>
</div>
</div>
</body>
</html>

Correction possible :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Accueil – Mon site</title>
    <meta name="description" content="Page d’accueil du site présentant le contenu principal et les informations de contact.">
  </head>
  <body>

    <header>
      <h1>Mon site</h1>
      <nav>
        <a href="#">Accueil</a>
        <a href="#">Contact</a>
      </nav>
    </header>

    <main>
      <section>
        <h2>Bienvenue</h2>
        <p>Contenu principal</p>
      </section>

      <figure>
        <img src="photo.jpg" alt="Photographie illustrant le contenu principal du site">
      </figure>
    </main>

  </body>
</html>

Exercice 2 – Créer une page accessible avec formulaire inclus

Objectif
Construire une page complète en respectant la structure HTML, la sémantique, l’accessibilité des formulaires et les bonnes pratiques SEO.

Consignes
Créez une page “Contact” complète contenant :

un head propre (charset, title, description)
un header avec navigation
un main avec :
- une section de présentation
- un formulaire de contact accessible
un footer

Le formulaire doit contenir :

prénom (texte, obligatoire)
email (email, obligatoire)
message (texte)
labels visibles
un bouton d’envoi

Contraintes :

hiérarchie des titres correcte
aucun champ sans name
pas de formulaire sans label
indentation claire

Correction possible (extrait formulaire) :

<form action="contact.html" method="get">
  <label>Prénom</label>
  <input type="text" name="prenom" required>

  <label>Email</label>
  <input type="email" name="email" required>

  <label>Message</label>
  <input type="text" name="message">

  <button>Envoyer</button>
</form>

Exercice 3 – Réécriture orientée accessibilité

Objectif
Comprendre l’impact réel de l’accessibilité sur des éléments simples.

Consignes
Réécrivez le code suivant pour qu’il soit accessible :

images avec texte alternatif pertinent
titres hiérarchisés
formulaire compréhensible par un lecteur d’écran

Code de départ :

<h3>Page</h3>
<img src="img.png">
<input placeholder="Email">
<button>OK</button>

Correction possible :

<h1>Page</h1>

<img src="img.png" alt="Illustration principale de la page">

<form action="resultat.html" method="get">
  <label>Email</label>
  <input type="email" name="email" required>
  <button>Envoyer</button>
</form>

Exercice 4 – Optimisation SEO d’une page HTML

Objectif
Améliorer la compréhension d’une page par les moteurs de recherche.

Consignes
Vous devez écrire une page HTML dont le sujet est :
“Formation HTML – initiation”.

La page doit contenir :

un title clair et explicite
une meta description cohérente
une structure sémantique complète
des titres hiérarchisés
du contenu textuel réel

Correction possible (extrait du head) :

<head>
  <meta charset="UTF-8">
  <title>Formation HTML – Initiation au développement web</title>
  <meta name="description" content="Formation HTML pour débutants : structure des pages, accessibilité, SEO et bonnes pratiques.">
</head>

Exercice 5 – Nettoyage et validation d’un code dégradé

Objectif
Savoir transformer un code mal écrit en code propre et robuste.

Consignes
Réécrivez le code suivant pour qu’il soit :

valide
lisible
structuré
accessible

Code de départ :

<h1>Site
<p>Intro
<h2>Section</h2>
<ul><li>Un<li>Deux</ul>
<img src="logo.png">

Correction possible :

<h1>Site</h1>

<p>Intro</p>

<h2>Section</h2>

<ul>
  <li>Un</li>
  <li>Deux</li>
</ul>

<img src="logo.png" alt="Logo du site">

Exercice 6 – Mini-projet final orienté qualité

Objectif
Valider la maîtrise globale du HTML, avec un accent sur l’accessibilité, le SEO et la structure propre.

Consignes
Réalisez une page complète au choix (site personnel, événement, association).

La page doit contenir :

un document HTML complet
une structure sémantique claire
au minimum :
- 1 header avec navigation
- 1 main structuré en sections
- 1 article
- 1 image avec alt pertinent
- 1 formulaire accessible
- un head optimisé (title + description)
- une hiérarchie de titres cohérente

Contraintes :

aucun élément hors programme
indentation propre
code lisible

Correction
La correction se fait par :

validation de la structure
vérification de l’accessibilité
justification des choix HTML
lecture critique du code

7. Mise en pratique et consolidation

Cette dernière partie de la formation a un objectif clair : vous faire passer d’une compréhension théorique du HTML à une maîtrise concrète, autonome et rigoureuse.
Tout ce que vous avez vu jusqu’ici (structure, sémantique, contenus, formulaires, accessibilité, SEO, qualité du code) doit maintenant être mobilisé dans un seul projet cohérent.

Il ne s’agit plus d’apprendre de nouvelles balises, mais de savoir les utiliser correctement, ensemble, avec méthode et exigence.

Cette mise en pratique est conçue pour occuper au minimum une demi-journée, voire plus selon le rythme, et doit être abordée comme un vrai projet de production HTML.

7.1 Projet fil rouge

Construction progressive d’une page complète

Le projet fil rouge consiste à concevoir et écrire une page web complète en HTML, depuis le document vide jusqu’à une version propre, structurée, accessible et prête à être stylée en CSS.

Vous travaillez sur une seule page, mais cette page doit être pensée comme si elle faisait partie d’un site réel.

Thème du projet (au choix)

Vous choisissez un seul thème, que vous conserverez jusqu’à la fin :

site personnel / portfolio
site d’un atelier ou d’une activité professionnelle
site d’une association
page de présentation d’un événement
site d’un lieu (atelier, école, collectif, restaurant, etc.)

Le thème est libre, mais le niveau d’exigence est le même quel que soit le sujet.

Étape 1 – Mise en place du document HTML

Vous commencez par créer un document HTML strictement valide.

Le document doit contenir :

le doctype HTML
la balise html avec un attribut de langue cohérent
un head complet et réfléchi
un body vide au départ

À ce stade, vous ne cherchez pas encore le contenu, mais la base technique du document.

Le head doit contenir :

un meta charset
un title explicite et en lien avec le thème
une meta description rédigée en français, descriptive et claire

L’objectif est que le navigateur et les moteurs de recherche comprennent immédiatement de quoi parle la page, avant même d’afficher le contenu.

Étape 2 – Structuration globale de la page

Une fois le document en place, vous construisez l’ossature sémantique de la page.

Votre page doit obligatoirement contenir :

un header
un main
un footer

Dans le header, vous devez prévoir :

un titre principal de page (h1)
une navigation structurée avec nav et des liens

Dans le main, vous devez organiser le contenu en :

plusieurs section clairement identifiées
au moins un article autonome

Vous ne remplissez pas encore tous les textes, mais vous posez la structure logique complète de la page.

L’objectif est que le plan de la page soit compréhensible uniquement en lisant les titres.

Étape 3 – Hiérarchie des contenus et rédaction HTML

Vous remplissez maintenant la page avec du contenu réel.

Votre page doit contenir :

une hiérarchie de titres cohérente (h1, h2, h3)
des paragraphes structurés
des listes lorsque cela a du sens (listes d’éléments, étapes, services, etc.)
au moins une citation intégrée correctement

Chaque choix de balise doit être justifié par le sens du contenu :

un paragraphe n’est pas une liste
une liste n’est pas une suite de paragraphes
un titre n’est pas un élément décoratif

À ce stade, le HTML doit être lisible comme un document structuré, même sans aucun style.

Étape 4 – Intégration des médias

Vous ajoutez des médias à votre page, en respectant les bonnes pratiques vues.

Votre page doit contenir :

au moins une image informative avec un texte alternatif pertinent
au moins une image intégrée dans un figure avec figcaption
au moins un média audio ou vidéo avec contrôles

Chaque média doit être :

placé à un endroit logique dans la structure
accompagné d’un texte alternatif ou d’un contexte clair
utile au contenu, et non décoratif par défaut

Vous devez être capable d’expliquer pourquoi ce média est là et ce qu’il apporte.

Étape 5 – Formulaire et interaction utilisateur

Vous intégrez ensuite un formulaire fonctionnel et accessible.

Le formulaire doit contenir :

au minimum trois champs
des types de champs adaptés
des attributs name cohérents
des champs obligatoires lorsque c’est pertinent
des label visibles et explicites
un bouton d’envoi correctement placé

Le formulaire doit être intégré dans une section logique de la page (contact, inscription, commentaire, etc.).

L’objectif n’est pas que le formulaire “envoie réellement des données”, mais que le navigateur puisse interpréter correctement l’intention de saisie.

7.2 Relecture et optimisation

Audit HTML

Une fois la page entièrement écrite, vous changez de posture :
vous n’êtes plus en train de produire, mais d’analyser votre propre code.

Vous devez relire votre HTML en vous posant systématiquement les questions suivantes :

la structure est-elle claire et logique ?
les balises utilisées ont-elles du sens ?
les titres suivent-ils une hiérarchie cohérente ?
les images ont-elles toutes un alt pertinent ?
les formulaires sont-ils compréhensibles sans CSS ?
le head décrit-il correctement la page ?

L’audit consiste à lire le HTML comme le ferait un navigateur ou un outil d’analyse, pas comme un designer.

Correction des erreurs

Après l’audit, vous corrigez :

les erreurs d’imbrication
les balises mal utilisées
les répétitions inutiles
les oublis d’attributs importants
les problèmes de lisibilité (indentation, ordre des blocs)

Vous devez chercher à obtenir un code :

lisible ligne par ligne
cohérent dans sa structure
stable et compréhensible sans interprétation implicite

Un bon indicateur : si quelqu’un d’autre lit votre HTML, il doit comprendre immédiatement la page.

Préparation pour le CSS

Enfin, vous préparez votre HTML à recevoir du CSS, sans encore en écrire.

Cela implique :

une structure propre et bien hiérarchisée
des sections clairement identifiées
des contenus bien regroupés
aucun bricolage structurel pour “anticiper le style”

Le HTML doit rester :

sémantique
indépendant du rendu visuel
prêt à être stylé sans être modifié

L’objectif final de ce projet fil rouge est simple :

vous devez être capable de produire une page HTML complète, propre, accessible, optimisée et prête pour une intégration professionnelle, sans avoir besoin de “corriger après coup”.

Ce projet marque la fin de l’apprentissage des bases HTML, et le début d’une pratique plus avancée et plus exigeante.

Correction

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Atelier Créatif – Bijoux et créations artisanales</title>
    <meta name="description" content="Atelier Créatif : créations artisanales, présentation des pièces, médias, et formulaire de contact accessible.">
  </head>
  <body>

    <header>
      <h1>Atelier Créatif</h1>

      <nav>
        <a href="#presentation">Présentation</a>
        <a href="#creations">Créations</a>
        <a href="#medias">Médias</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>

    <main>

      <section id="presentation">
        <h2>Présentation</h2>

        <p>Bienvenue sur le site de l’Atelier Créatif. Vous y trouverez une présentation de mon travail, une sélection de créations et un moyen simple de me contacter.</p>

        <p>Chaque pièce est conçue comme un objet unique, pensé pour accompagner son porteur au quotidien.</p>

        <blockquote>
          <p>Une création réussie se reconnaît à la clarté de son intention.</p>
        </blockquote>
      </section>

      <section id="creations">
        <h2>Créations</h2>

        <p>Voici quelques catégories de pièces que vous pouvez retrouver à l’atelier. Cette liste vous donne une vue rapide des types de créations proposées.</p>

        <ul>
          <li>Bagues et anneaux</li>
          <li>Pendentifs et talismans</li>
          <li>Petites séries sur commande</li>
        </ul>

        <article>
          <h3>Pièce mise en avant : la bague “Sillage”</h3>

          <p>Cette bague est réalisée en petite série. Elle est pensée pour être confortable au quotidien, tout en conservant une présence marquée.</p>

          <figure>
            <img src="bague-sillage.jpg" alt="Bague en métal avec une forme organique, photographiée sur fond neutre">
            <figcaption>La bague “Sillage” : une forme organique inspirée du mouvement.</figcaption>
          </figure>

          <p>Si vous souhaitez en savoir plus sur cette pièce, vous pouvez me contacter via le formulaire en bas de page.</p>
        </article>
      </section>

      <section id="medias">
        <h2>Médias</h2>

        <p>Cette section présente un aperçu du travail en atelier et du processus de fabrication.</p>

        <figure>
          <img src="atelier.jpg" alt="Atelier de création avec un établi et des outils de bijouterie">
          <figcaption>Vue de l’espace de travail : outils, établis et préparation des pièces.</figcaption>
        </figure>

        <h3>Présentation vidéo</h3>

        <video controls>
          <source src="presentation-atelier.mp4">
        </video>

        <h3>Ambiance sonore</h3>

        <audio controls>
          <source src="ambiance-atelier.mp3">
        </audio>
      </section>

      <section id="contact">
        <h2>Contact</h2>

        <p>Utilisez ce formulaire pour poser une question, demander une disponibilité ou proposer un projet.</p>

        <form action="resultat.html" method="get">
          <label>Prénom</label>
          <input type="text" name="prenom" placeholder="Votre prénom" required>

          <label>Email</label>
          <input type="email" name="email" placeholder="Votre email" required>

          <label>Sujet</label>
          <input type="text" name="sujet" placeholder="Exemple : commande, question, rendez-vous">

          <label>Message</label>
          <input type="text" name="message" placeholder="Votre message">

          <button>Envoyer</button>
        </form>
      </section>

      <aside>
        <h2>Informations pratiques</h2>

        <p>L’atelier reçoit sur rendez-vous. Vous pouvez proposer un créneau via le formulaire de contact.</p>

        <ol>
          <li>Décrivez votre demande</li>
          <li>Indiquez vos disponibilités</li>
          <li>Vous recevez une réponse par email</li>
        </ol>
      </aside>

    </main>

    <footer>
      <p>© 2026 Atelier Créatif</p>
    </footer>

  </body>
</html>

Conclusion – Clôture de la partie HTML et ouverture vers le CSS

Vous arrivez à la fin de l’apprentissage du HTML.
À ce stade, il est important de prendre du recul sur tout ce que vous avez vu, non pas comme une liste de balises, mais comme une manière de penser une page web.

Le HTML n’est pas un langage de mise en forme.
Ce n’est pas non plus un langage de programmation.
C’est un langage de structure, de sens et d’intention.

Ce que vous avez appris avec le HTML

Tout au long de cette formation, vous avez appris à :

construire un document HTML valide, compréhensible par le navigateur
structurer une page avec une hiérarchie claire (html, head, body)
organiser le contenu avec des balises sémantiques (header, main, section, article, nav, footer)
hiérarchiser l’information avec des titres cohérents
choisir les bonnes balises selon le sens du contenu (paragraphes, listes, citations)
intégrer des médias de manière propre et accessible
créer des formulaires lisibles, compréhensibles et exploitables par le navigateur
rendre une page plus accessible (textes alternatifs, labels, structure)
améliorer la lisibilité du code et sa qualité globale
préparer un document pour le SEO et l’analyse automatique

Vous avez surtout appris à penser le HTML comme un document structuré, lisible même sans style, et exploitable par des outils très différents : navigateur, lecteur d’écran, moteur de recherche, développeur tiers.

Ce que le navigateur comprend désormais de votre page

Grâce à votre travail en HTML, le navigateur est capable de :

identifier clairement les zones de la page
comprendre quels contenus sont principaux ou secondaires
naviguer logiquement entre les sections
associer les champs de formulaire à leurs libellés
interpréter les médias et leur rôle
transmettre des données de manière cohérente
analyser la page sans “deviner” votre intention

Autrement dit : vous avez donné du sens à la page.

Les limites assumées du HTML

Même avec un HTML parfaitement écrit, votre page reste volontairement neutre visuellement.

Les contenus sont empilés
Les éléments ne sont pas positionnés
Les couleurs, espacements et typographies ne sont pas définis
L’expérience visuelle reste minimale

Ce n’est pas une faiblesse.
C’est une séparation volontaire des responsabilités.

Le HTML décrit ce qu’est le contenu.
Il ne décrit pas comment il doit apparaître.

Pourquoi cette séparation est essentielle

En séparant strictement :

le HTML pour la structure et le sens
le CSS pour la présentation visuelle

vous obtenez :

un code plus lisible
une maintenance plus simple
une meilleure accessibilité
une meilleure compatibilité entre navigateurs
une meilleure évolutivité du projet

Un bon CSS repose toujours sur un HTML propre et cohérent.
Un HTML mal structuré rend le CSS complexe, fragile et difficile à maintenir.

Introduction au CSS : la suite logique

Le CSS n’arrive pas pour “corriger” le HTML.
Il arrive pour le mettre en valeur.

Dans la suite de la formation, le CSS va vous permettre de :

organiser visuellement les éléments
gérer les espacements et les alignements
définir les couleurs et les typographies
structurer la page dans l’espace
améliorer l’expérience utilisateur

Mais le CSS n’ajoutera jamais de sens.
Il s’appuie entièrement sur la structure que vous avez déjà construite.

Une base solide pour aller plus loin

Si vous avez respecté les principes vus en HTML :

structure claire
sémantique pertinente
accessibilité de base
code lisible et propre

alors vous avez une base professionnelle.

Tout ce qui viendra ensuite (CSS, responsive, animations, JavaScript) reposera sur ce socle.

Avant d’écrire une seule règle CSS, retenez ceci :

un bon design commence toujours par un bon HTML.

C’est sur cette base que vous allez maintenant pouvoir construire l’apparence de vos pages.

MAÎTRISER LE HTML

By nicolas_lamy