Fondamentaux du HTML
© Nicolas Lamy - Tous droits réservés.
Par Nicolas Lamy
Mise à jour du 8 Janvier 2026
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.
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 à :
Le HTML ne sert pas à :
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.
<h1>Bienvenue sur mon site</h1>
<p>Ceci est un paragraphe de texte.</p>
Ici :
h1 indique un titre principalp indique un paragrapheLe 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 :
Consignes:
Indiquez pour chaque affirmation si elle correspond au rôle du HTML.
Correction:
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 :
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 :
C’est une mauvaise pratique, car :
Un HTML propre doit rester centré sur le sens, pas sur le visuel.
Consignes:
Indiquez si les éléments suivants relèvent de la structure du document ou de son apparence.
Correction:
Un navigateur est un logiciel capable de lire et interpréter des fichiers HTML.
Lorsqu’un navigateur ouvre une page :
Le navigateur ne “devine” rien.
Il ne corrige pas la logique du document.
Il applique strictement ce qui est écrit.
<h2>Sous-titre</h2>
<h1>Titre principal</h1>
<p>Paragraphe</p>
Le navigateur comprend :
Même si cela peut sembler illogique, le navigateur ne réorganise pas le contenu.
Cette lecture stricte est essentielle pour :
Consignes:
Observez le code suivant.
<h2>Deuxième titre</h2>
<p>Un paragraphe</p>
<h1>Premier titre</h1>
Répondez aux questions :
Correction:
Écrire du HTML, ce n’est pas seulement faire fonctionner une page.
C’est écrire un code :
Bonnes pratiques fondamentales :
<div>
<h1>Mon site</h1>
<p>Bienvenue sur mon site.</p>
</div>
<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.
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>
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 :
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 :
Consignes:
Dans le code suivant, identifiez :
<!DOCTYPE html>
<html lang="fr">
</html>
Correction:
<!DOCTYPE html> est le doctype <html lang="fr">...</html> est la balise racineLa balise head contient des informations non visibles par l’utilisateur, mais essentielles pour le navigateur.
On y place notamment :
<head>
<meta charset="UTF-8">
<title>Ma première page HTML</title>
</head>
Le navigateur utilise ces informations pour :
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>
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 :
<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 :
Consignes:
Créez un document HTML complet contenant :
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>
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 :
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 importanth2 : titre de second niveauh3 : sous-titre de h2
h6 : niveau le plus faibleÀ quoi ça sert
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
h1 pour le titre principal de la page (en général un seul)h2 pour les grandes sectionsh2 puis h3 si besoinExemple 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
h1 à h4)h1 pour des titres qui ne sont pas le titre principalExemple incorrect :
<h1>Accueil</h1>
<h4>Présentation</h4>
<h2>Contact</h2>
Problèmes :
h1 → h4 : la hiérarchie devient incohérenteExplication du code (ligne par ligne) sur un exemple correct
<h1>Guide de voyage à Marseille</h1>
h1 indique le sujet principal de la page<h2>Quartiers à visiter</h2>
h2 ouvre une grande section de contenuh1
<h3>Le Panier</h3>
h3 est une sous-section de la section “Quartiers à visiter”h2 au-dessusConsignes
Écrivez la hiérarchie de titres HTML pour une page dont le sujet est “Recettes simples”, avec :
Correction
<h1>Recettes simples</h1>
<h2>Entrées</h2>
<h2>Desserts</h2>
<h3>Gâteaux</h3>
<h3>Fruits</h3>
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
À quoi ça sert
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
p pour tout texte de type “phrase / bloc de lecture”Exemple correct :
<p>Je découvre les bases du HTML.</p>
<p>Je structure mon texte avec des paragraphes.</p>
Ce qui est incorrect
body sans baliseExemple incorrect :
Je découvre le HTML.
Je structure mon texte.
Le navigateur peut afficher ce texte, mais vous perdez :
Explication ligne par ligne d’un exemple correct
<p>Je découvre les bases du HTML.</p>
p indique : “ce texte est un paragraphe”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>
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
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 grasem en italiqueCe qui est correct
strong pour une information réellement importanteem pour insister sur un mot dans une phraseExemples 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
strong pour mettre en gras “au hasard”strong sans raisonem comme décoration visuelle uniquementExemple incorrect :
<p><strong>Bienvenue sur mon site personnel et voici tout mon texte en gras</strong></p>
Problème :
Explication ligne par ligne d’un exemple correct
<p>Vous devez <strong>toujours</strong> écrire le doctype.</p>
p : paragraphestrong : le mot “toujours” est signalé comme particulièrement importantConsignes
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>
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
href indique la destinationÀ quoi ça sert
Comment le navigateur l’interprète
Le navigateur :
href pour savoir où allerUn 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
href
href vide sans intentionExemples incorrects :
<a>Contact</a>
https://example.com
Explication ligne par ligne d’un lien correct
<a href="contact.html">Contact</a>
a : balise de lienhref="contact.html" : destination du lienContact : texte visible et cliquableConsignes
Écrivez :
Correction
<a href="about.html">À propos</a>
<a href="https://example.com">Site externe</a>
La balise img sert à afficher une image dans la page.
Ce que c’est
src et alt
À quoi ça sert
Comment le navigateur l’interprète
Le navigateur :
src pour trouver le fichier imagealt si l’image ne peut pas être affichée ou si l’utilisateur utilise un lecteur d’écranCe qui est correct
Exemple :
<img src="photo.jpg" alt="Portrait en noir et blanc d’une personne souriante">
Ce qui est incorrect
alt
alt vide sans raisonalt comme légende décorativealt sans décrire réellementExemple incorrect :
<img src="photo.jpg">
ou
<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 imagesrc : chemin vers l’imagealt : texte alternatif descriptif, utile si l’image ne s’affiche pas et pour l’accessibilité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">
À 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 :
À quoi ça sert
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
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
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>
<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">
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">
Revoir la structure HTML de base, la hiérarchie des titres, les paragraphes et les listes.
Vous devez créer une page HTML complète présentant une personne fictive.
La page devra contenir :
<!DOCTYPE html>, <html>, <head>, <body>)Aucun CSS n’est demandé. Concentrez-vous uniquement sur le HTML.
<!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>
Utiliser les balises sémantiques et structurer un contenu éditorial.
Vous devez créer la structure d’un article de blog en respectant la sémantique HTML.
La page devra contenir :
Utilisez les balises sémantiques appropriées.
<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>
Combiner listes, structure sémantique et hiérarchie des titres.
Créez une page HTML pour un restaurant fictif.
La page devra contenir :
<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>
Analyser un HTML existant et appliquer les bonnes pratiques.
Voici une page mal structurée. Corrigez-la pour :
<div>
<h3>Mon site</h3>
<div>
<h1>Accueil</h1>
<p>Bienvenue</p>
</div>
</div>
<header>
<h1>Mon site</h1>
</header>
<main>
<section>
<h2>Accueil</h2>
<p>Bienvenue</p>
</section>
</main>
Mobiliser l’ensemble des notions vues : structure, sémantique, listes, hiérarchie.
Choisissez un univers fictif ou réel (film, série, artiste, jeu vidéo).
Créez une page HTML contenant :
Organisez votre contenu de manière logique et lisible.
<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>
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.
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 :
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 :
À 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.
Consignes
Écrivez la structure HTML d’une page contenant :
h1 “Portfolio”h2 “Projets” et un paragrapheCorrection
<header>
<h1>Portfolio</h1>
</header>
<main>
<h2>Projets</h2>
<p>Voici une sélection de mes projets.</p>
</main>
<footer>
<p>© 2026</p>
</footer>
À 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 :
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.
Consignes
Indiquez la balise la plus adaptée pour chaque situation.
Correction
navarticleasidesectionLa 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.
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>
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 :
Lorsque le navigateur analyse une telle page, il obtient une hiérarchie claire, exploitable par tous les outils.
Consignes
Écrivez la structure d’une page “Portfolio” avec :
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>
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 :
À 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>
Durée totale possible : 1h30 à 2h30
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.
headernavmainsectionfooterCode 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>
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 :
header avec :h1 (nom du photographe)nav avec 3 liensmain avec :section “Présentation”section “Galeries”article, chacun avec un h3 et un paragrapheaside “Infos pratiques”footer avec copyrightContraintes :
div inutileCorrection 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>
Objectif pédagogique
Forcer la compréhension fine de la différence entre section et article.
Consignes
Pour chaque cas ci-dessous :
section ou article)Cas :
Correction
section – elle regroupe plusieurs contenus liésarticle – contenu autonomesection – regroupement thématiquearticle – contenu indépendantsection – contenu non autonome hors contexteObjectif pédagogique
Comprendre que la sémantique sert aussi la lecture humaine.
Consignes
Voici le contenu d’une page, sans structure.
Vous devez :
Contenu :
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>
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) :
Objectif pédagogique
Mobiliser toutes les notions vues de manière autonome.
Consignes
Choisissez un thème parmi :
Réalisez la structure HTML complète de la page d’accueil avec :
header + nav
main avec au moins 2 section
article
aside
footerContraintes :
Correction
La correction se fait par :
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.
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 :
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 :
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 :
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.
Consignes
Indiquez pour chaque situation s’il est plus pertinent d’utiliser une liste ordonnée ou non ordonnée.
Correction
Consignes
Écrivez :
Contraintes :
li
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>
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 :
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.
Consignes
À partir des éléments suivants, écrivez un HTML correct :
Contraintes :
h2
blockquote
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>
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 :
src)alt)Le texte alternatif est fondamental.
Il permet au navigateur de transmettre l’information de l’image lorsque :
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">
Consignes
Écrivez la balise img correspondante pour chaque situation :
bureau.jpg)logo.png)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="">
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 :
figcaption
Le navigateur interprète cet ensemble comme une unité logique.
Cela améliore :
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.
Consignes
Transformez l’image et le texte suivants en une structure sémantique correcte :
photo-mer.jpg
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>
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 :
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.
Consignes
Écrivez :
video avec contrôles pour le fichier demo.mp4
audio avec contrôles pour le fichier intro.mp3
Correction :
<video controls>
<source src="demo.mp4">
</video>
<audio controls>
<source src="intro.mp3">
</audio>
Ces exercices mobilisent uniquement les notions vues dans les parties suivantes :
head, body, bonnes pratiquesfigure, audio et vidéoObjectif
Être capable de construire un document HTML complet, valide, lisible et sémantique à partir d’un contenu brut.
Consignes
Vous disposez du contenu suivant :
atelier.jpg (photo montrant un atelier de création)Travail demandé
Écrivez un document HTML complet contenant :
html, head, body
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>
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 :
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>
Objectif
Savoir analyser un HTML existant et corriger sa structure sémantique.
Consignes
Analysez le code suivant, puis :
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>
Objectif
Choisir la structure HTML la plus adaptée selon le type de contenu.
Consignes
Structurez une page “Formation Web” contenant :
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>
Objectif
Utiliser correctement images, figures et médias audio/vidéo.
Consignes
Créez une section “Médias” contenant :
figure et figcaption
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>
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 formulaire HTML n’est pas “juste un bloc avec des champs”. C’est une interface structurée qui permet au navigateur de :
name)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.
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.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 :
form appartient à la même soumissionresultat.html
Erreurs fréquentes :
form et croire qu’ils seront envoyésform dans un autre) : le HTML devient invalide et le comportement devient imprévisibleaction et ne plus savoir où part l’envoiExemple 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.
Consignes
Créez une page HTML complète et ajoutez un formulaire minimal, puis testez son comportement dans le navigateur.
title et meta charset.body, créez un formulaire avec :action="resultat.html"method="get"email
Test :
Contraintes :
name présentCorrection 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>
Les champs sont les éléments qui collectent une valeur. Le navigateur associe à chaque champ :
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.
Consignes
Créez un formulaire d’inscription contenant :
Contraintes :
name cohérentrequired sur email et mot de passemethod="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>
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 :
form
Consignes
Créez un formulaire “Recherche” :
name="q"
required)action="recherche.html" et method="get"
Test :
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>
Le type d’un input indique au navigateur le genre de valeur attendu.
Cela influence :
Voici des types essentiels que vous devez connaître et savoir choisir.
Exemples :
<input type="text" name="prenom">
<input type="email" name="email">
<input type="password" name="motdepasse">
<input type="number" name="age">
Le navigateur :
email comme une adresse email et peut refuser un format manifestement invalidepassword
number
Erreurs fréquentes :
text pour tout et perdre l’aide du navigateurnumber pour des valeurs qui ne sont pas des quantités (ex : téléphone), ce qui crée des contraintes absurdesCes 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 :
range
Note importante : l’apparence dépend du navigateur, mais la logique reste la même : une valeur associée à un nom.
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 initialExemple 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 :
name
value est indispensable : c’est la valeur envoyée si le radio est sélectionnéErreurs fréquentes :
name différents : le navigateur les laisse tous sélectionnablesvalue : vous perdez l’information envoyéefile 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 :
hidden pour cacher une donnée “importante” à l’utilisateur (mauvaise approche)value sur un champ hiddenConsignes
Créez un formulaire “Préférences utilisateur” avec :
name="naissance"
name="volume" avec :name="theme" avec :value="clair", sélectionné par défaut)value="sombre")name="newsletter" cochée par défautname="avatar" pour choisir un avatarname="source" avec value="exercice4"
Contraintes :
name
name
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>
Les attributs ne sont pas des détails. Ce sont des instructions directes données au navigateur, qui modifient :
value définit :
Exemple radio indispensable :
<input type="radio" name="formule" value="premium">
Exemple hidden :
<input type="hidden" name="source" value="landing-page">
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 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 :
disabled alors que vous voulez simplement empêcher une modification (dans ce cas, readonly est souvent plus cohérent)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.
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 :
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 :
autocomplete améliore l’expérienceConsignes
Créez un formulaire “Créer un compte” qui respecte les contraintes suivantes :
Champs :
Email :
email
email
Mot de passe :
motdepasse
{8,})Âge :
age
Code promo :
codepromo
BIENVENUE2026
Acceptation des CGU :
cgu
Bouton “Créer le compte”
Contraintes :
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>
Les formulaires ne se résument pas à input.
Certaines saisies ne sont pas adaptées à un champ texte simple.
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 :
input type="text" pour un message longname, et perdre le message à l’envoiselect 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 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 :
legend, ce qui rend le groupe moins expliciteConsignes
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
given-name)family-name)email)Groupe 2 : Demande
name="demande") avec deux groupes :value="bague"), Pendentif (value="pendentif")value="reparation"), Conseil (value="conseil")budget
name="delai" avec values :value="urgent")value="standard", coché par défaut)name="source" value fil-rouge
Contraintes :
form action="devis.html" method="get"name
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>
Concevoir une page HTML complète combinant contenu éditorial, structuration logique et formulaire complexe.
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.
La page doit comporter :
1. Une zone d’en-tête contenant :
2. Une section expliquant le principe du jeu :
3. Une section centrale permettant à l’utilisateur :
4. Une section illustrée :
5. Un pied de page simple.
<!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>
Créer une page informative combinant contenu éditorial, hiérarchie et formulaire réaliste.
Vous devez créer une page permettant de réserver une place pour un événement culturel.
La page doit :
L’utilisateur doit pouvoir :
<!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>
Utiliser les formulaires comme outil logique et structuré.
Vous devez créer un quiz HTML.
Le quiz doit :
Chaque question doit être clairement séparée et compréhensible seule.
<!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>
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).
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.
1. Présentation de la prestation
La page doit présenter clairement :
Cette partie doit contenir :
2. Illustration de la prestation
La page doit inclure une zone illustrée :
3. Formulaire de demande de devis
Le formulaire doit être structuré et doit permettre à l’utilisateur de fournir:
Contraintes d’ergonomie et de qualité :
<!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>
Créer une page de newsletter qui combine contenu éditorial, structure claire, et formulaire complet incluant préférences, choix multiples, consentement, et contraintes.
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.
1. Zone de présentation
La page doit inclure :
2. Formulaire d’inscription
L’utilisateur doit pouvoir :
Contraintes :
<!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>
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.
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.
1. Présentation
La page doit expliquer :
Cette partie doit contenir :
2. Section “Exemples de bugs” Vous devez inclure un petit encart contenant :
3. Formulaire de signalement
L’utilisateur doit pouvoir :
Contraintes :
<!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>
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 :
Dans cette partie, vous allez apprendre à écrire un HTML qui reste lisible pour le navigateur, mais aussi pour :
L’objectif est simple : produire un code propre, robuste, et compréhensible même en dehors de l’affichage visuel.
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 :
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 :
src)alt)Ce texte alternatif est utilisé par :
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 :
Erreurs fréquentes :
alt : le navigateur n’a aucun texte de remplacementExemple incorrect :
<img src="logo.png" alt="image">
Le navigateur a bien un texte, mais il ne donne aucune information.
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 :
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 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 :
name, donc sans donnée exploitableExemple 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 :
name
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 :
Un document cohérent contient généralement :
h1 principal (souvent unique pour la page)h2 pour les sections principalesh3 pour les sous-sectionsExemple 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 :
Erreurs fréquentes :
h1 puis h4)h1 au hasardExemple incorrect :
<h1>Accueil</h1>
<h4>Présentation</h4>
<h2>Projets</h2>
Le navigateur peut afficher, mais la structure logique est incohérente.
Consignes
Corrigez la hiérarchie suivante pour obtenir un plan logique :
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>
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 :
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 :
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 :
title générique “Accueil” ou “Page”meta charset
Exemple incorrect :
<head>
<title>Page</title>
</head>
Le navigateur s’en sort, mais la page est pauvre en informations utiles.
Consignes
Écrivez un head complet contenant :
meta charset="UTF-8"title explicite pour une page “Contact – Atelier Créatif”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>
Un moteur de recherche analyse la structure de la page pour comprendre :
Une page remplie de div peut s’afficher, mais elle est beaucoup plus difficile à interpréter automatiquement.
Une structure sémantique claire aide :
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 :
div
Consignes
Réécrivez le code suivant avec une structure sémantique correcte :
div par header, nav, main, footer
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>
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 à :
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 :
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.
Objectif
Apprendre à analyser une page HTML fonctionnelle mais mal écrite, et l’améliorer sur les plans :
Consignes
Voici une page HTML existante.
Elle s’affiche correctement dans un navigateur, mais elle contient de nombreux problèmes.
Vous devez :
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>
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 :
head propre (charset, title, description)header avec navigationmain avec :footer
Le formulaire doit contenir :
Contraintes :
name
label
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>
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 :
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>
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 :
title clair et expliciteCorrection 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>
Objectif
Savoir transformer un code mal écrit en code propre et robuste.
Consignes
Réécrivez le code suivant pour qu’il soit :
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">
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 :
alt pertinenthead optimisé (title + description)Contraintes :
Correction
La correction se fait par :
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.
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.
Vous choisissez un seul thème, que vous conserverez jusqu’à la fin :
Le thème est libre, mais le niveau d’exigence est le même quel que soit le sujet.
Vous commencez par créer un document HTML strictement valide.
Le document doit contenir :
html avec un attribut de langue cohérenthead complet et réfléchibody vide au départÀ ce stade, vous ne cherchez pas encore le contenu, mais la base technique du document.
Le head doit contenir :
meta charset
title explicite et en lien avec le thèmemeta description rédigée en français, descriptive et claireL’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.
Une fois le document en place, vous construisez l’ossature sémantique de la page.
Votre page doit obligatoirement contenir :
header
main
footer
Dans le header, vous devez prévoir :
h1)nav et des liensDans le main, vous devez organiser le contenu en :
section clairement identifiéesarticle autonomeVous 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.
Vous remplissez maintenant la page avec du contenu réel.
Votre page doit contenir :
h1, h2, h3)Chaque choix de balise doit être justifié par le sens du contenu :
À ce stade, le HTML doit être lisible comme un document structuré, même sans aucun style.
Vous ajoutez des médias à votre page, en respectant les bonnes pratiques vues.
Votre page doit contenir :
figure avec figcaption
Chaque média doit être :
Vous devez être capable d’expliquer pourquoi ce média est là et ce qu’il apporte.
Vous intégrez ensuite un formulaire fonctionnel et accessible.
Le formulaire doit contenir :
name cohérentslabel visibles et explicitesLe 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.
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 :
alt pertinent ?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.
Après l’audit, vous corrigez :
Vous devez chercher à obtenir un code :
Un bon indicateur : si quelqu’un d’autre lit votre HTML, il doit comprendre immédiatement la page.
Enfin, vous préparez votre HTML à recevoir du CSS, sans encore en écrire.
Cela implique :
Le HTML doit rester :
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>
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.
Tout au long de cette formation, vous avez appris à :
html, head, body)header, main, section, article, nav, footer)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.
Grâce à votre travail en HTML, le navigateur est capable de :
Autrement dit : vous avez donné du sens à la page.
Même avec un HTML parfaitement écrit, votre page reste volontairement neutre visuellement.
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.
En séparant strictement :
vous obtenez :
Un bon CSS repose toujours sur un HTML propre et cohérent.
Un HTML mal structuré rend le CSS complexe, fragile et difficile à maintenir.
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 :
Mais le CSS n’ajoutera jamais de sens.
Il s’appuie entièrement sur la structure que vous avez déjà construite.
Si vous avez respecté les principes vus en HTML :
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.