10 exercices de HTML pour progresser (avec corrections)

Le HTML ne s’apprend pas en résolvant des énigmes mais en construisant des pages — c’est toute la différence avec les exercices d’algorithmique, et c’est tant mieux : chaque réalisation est un objet fini, visible, montrable. Ces 10 exercices de HTML suivent la progression de nos bases du HTML, du squelette au CV complet, dans le cadre du parcours apprendre le HTML.

Exercices 1 à 5 : structurer du contenu

1. La carte de visite. Une page avec ton nom en titre principal, ta fonction en sous-titre, une phrase de présentation. Piste : le squelette complet (doctype, html, head avec title, body), un h1, un h2, un paragraphe — vérifie que le titre de l’onglet s’affiche bien.
2. L’article de blog. Un article fictif avec titre principal, introduction, trois sections titrées et leurs paragraphes. Piste : un seul h1, des h2 pour les sections — la hiérarchie des titres est le vrai sujet de l’exercice, comme dans une dissertation.
3. La page de liens favoris. Tes cinq sites préférés en liste, chaque nom cliquable, s’ouvrant dans un nouvel onglet. Piste : ul et li pour la liste, la balise a avec href pour chaque lien, et l’attribut target= »_blank » pour le nouvel onglet.
4. La galerie légendée. Trois images avec chacune sa légende. Piste : le duo figure et figcaption enveloppe chaque image ; soigne l’attribut alt de chaque img — décris ce qu’on voit, pas « image1 ».
5. Le menu de restaurant. Entrées, plats, desserts : trois catégories contenant chacune leurs plats. Piste : des listes imbriquées — une ul générale dont chaque li contient un titre de catégorie et une nouvelle ul. L’indentation propre de ton code est la moitié de l’exercice.

Exercices 6 à 10 : données, saisie et pages complètes

6. Le tableau d’horaires. Les horaires d’ouverture d’un commerce sur la semaine. Piste : table, une ligne tr d’en-têtes avec th (Jour, Matin, Après-midi), puis une tr par jour avec ses td. Les données tabulaires sont l’unique bon usage du tableau.
7. Le formulaire de contact. Nom, email, message, bouton d’envoi. Piste : form, des input de type text et email, un textarea, un button — et surtout un label relié à chaque champ par l’attribut for. Il ne s’enverra nulle part pour l’instant : la version fonctionnelle t’attend dans créer un formulaire de contact.
8. La page sémantique. Reprends ton article de l’exercice 2 et enveloppe-le dans une vraie structure : en-tête avec titre du site, navigation, contenu principal, pied de page. Piste : header, nav (avec une liste de liens), main, footer — la page s’affiche pareil, mais elle a maintenant du sens.
9. La page à ancres. Un sommaire en haut de page dont chaque entrée fait défiler vers sa section. Piste : donne un attribut id à chaque titre de section, et fais pointer les liens du sommaire vers #cet-id — la navigation interne, brique des documentations.
10. Le CV en HTML pur. La synthèse : identité en en-tête, sections expériences et formation, compétences en liste, contact en formulaire ou en liens, structure sémantique partout. Piste : tout ce que tu viens d’apprendre, assemblé. Il sera brut visuellement — parfait : c’est exactement lui que tu styliseras dans les exercices de CSS.

La méthode : le navigateur est ton correcteur

Le HTML offre un luxe pédagogique : la vérification instantanée. Après chaque modification, recharge la page — ce réflexe modifier-recharger-observer, répété des centaines de fois, est l’entraînement lui-même. Complète-le par deux contrôles de qualité : l’inspection (clic droit, Inspecter) pour comparer ce que tu as écrit et ce que le navigateur a compris — les balises mal fermées s’y révèlent immédiatement —, et la validation avec le validateur du W3C, qui liste tes erreurs de syntaxe comme un correcteur orthographique. Prends aussi l’habitude d’indenter proprement chaque niveau d’imbrication : un code lisible aujourd’hui, c’est un débogage divisé par deux demain.

Enchaîne les dix dans l’ordre, un par séance, et prolonge les réussites : ajoute une section au CV, une catégorie au menu, une colonne au tableau. À la fin de la série, tu tiens un vrai portefeuille de pages — et la frustration montante devant leur austérité est exactement le bon carburant pour la suite : les bases du CSS vont tout transformer, avant d’assembler structure et style en créant ton premier site complet. Quand tu voudras ensuite un défi de structure plus ambitieux, la reproduction d’un site connu prendra le relais. Pour un flux continu d’entraînement au-delà de cette page, les sites d’exercices gratuits ont tous leur section web.

Deux conseils d’atelier pour amplifier la série. Remplis tes pages de vrai contenu : tes films préférés dans la page de liens, ton vrai parcours dans le CV, le menu de ton restaurant favori plutôt que du faux-texte générique. Le contenu réel t’oblige à des choix de structure authentiques (que faire d’une expérience sans date ? d’un plat avec deux prix ?) — exactement les questions qu’on se pose sur de vrais projets, et que le lorem ipsum ne pose jamais. Et montre tes pages : envoie le fichier à un proche, demande ce qu’il comprend de la structure, observe où son regard bute. Une page HTML est faite pour être lue par d’autres ; s’habituer tôt à ce regard extérieur est un réflexe de développeur — et une source de motivation étonnamment efficace.

Questions fréquentes

Sources

• MDN Web Docs — apprendre le HTML par la pratique
• W3C — validateur et standards du web

Cet article a une vocation informative et pédagogique. Les plateformes, outils et formations éventuellement cités le sont à titre d’exemple ; compare plusieurs options avant de t’engager ou de payer.