HTML fondamentaux : structurer des pages web modernes et accessibles
HTML fondamentaux est un cours de niveau débutant de 6 leçons (environ 3 h 05), avec 18 exercices et 18 questions de quiz. Aucun prérequis. Les exercices s'exécutent dans le navigateur, sans installation.
- Front-end
- Débutant
- 6 leçons
- 3 h 05
- 18 exercices
- Exercices exécutés dans le navigateur
Le cours en bref
Ce cours pose les fondations de tout projet web : écrire un document HTML valide et bien structuré. Vous apprendrez à baliser textes, liens, images, tableaux et formulaires en privilégiant la sémantique et l'accessibilité. Chaque leçon alterne explications, exercices dans le navigateur et quiz, et le cours se termine par la réalisation d'un site vitrine de plusieurs pages.
Ce que tu sauras faire
- Écrire le squelette complet d'une page HTML moderne
- Structurer un contenu avec titres, paragraphes, listes et éléments sémantiques
- Insérer des liens et des images accessibles
- Présenter des données dans un tableau accessible
- Créer des formulaires utilisables avec labels et validation native
- Organiser un petit site de plusieurs pages reliées entre elles
Programme des 6 leçons
- Écrire le squelette minimal d'une page HTML valide
- Distinguer le rôle de <head> et de <body>
- Comprendre la notion de balise, d'élément et d'attribut
- 02
Titres, paragraphes et listes
- Hiérarchiser un texte avec les titres h1 à h6
- Structurer du texte avec paragraphes, emphase et listes
- Choisir entre liste ordonnée et non ordonnée
- 03
Liens et images
- Créer des liens internes, externes et des ancres
- Insérer une image accessible avec un texte alternatif pertinent
- Comprendre les chemins relatifs et absolus
- 04
Structurer une page avec le HTML sémantique
- Découper une page en zones avec header, nav, main, section, article, aside, footer
- Choisir entre un élément sémantique et un div
- Comprendre l'intérêt de la sémantique pour l'accessibilité et le SEO
- 05
Les tableaux de données
- Construire un tableau avec table, tr, th et td
- Structurer un tableau avec caption, thead, tbody et l'attribut scope
- Savoir quand utiliser (et ne pas utiliser) un tableau
- 06
Les formulaires
- Créer un formulaire avec des champs adaptés (text, email, tel, number, date, checkbox, radio, select, textarea)
- Associer chaque champ à un label
- Utiliser la validation native (required, minlength, pattern, min, max)
Projet final
Site vitrine de trois pages pour un petit commerce
Réalisez en HTML seul (sans CSS) le site d'un commerce ou d'une association de votre choix : une page d'accueil, une page de services ou de tarifs, et une page de contact. Le site doit être sémantique, accessible et navigable.
Livrables
- index.html : en-tête avec logo et navigation, présentation, au moins une image avec légende, pied de page
- services.html : liste de services et tableau de tarifs avec caption, thead et scope
- contact.html : formulaire de contact complet (labels, types adaptés, validation native) et horaires
- Une navigation identique sur les trois pages avec des liens relatifs fonctionnels
Critères d'évaluation
- Squelette valide sur chaque page (doctype, lang, charset, viewport, title unique et descriptif)
- Hiérarchie de titres correcte : un h1 par page, aucun niveau sauté
- Utilisation pertinente de header, nav, main, section/article et footer
- Toutes les images ont un alt adapté ainsi que width et height
- Tableau accessible et formulaire dont chaque champ a un label et un name
- Code indenté, sans balise mal fermée
Questions fréquentes
Faut-il des connaissances préalables pour suivre ce cours HTML ?
Non. Le cours part de zéro : il suffit d'un navigateur. Les exercices se font directement dans la plateforme.
Combien de temps faut-il pour apprendre les bases du HTML ?
Comptez environ 3 heures pour les six leçons et 1 h 30 pour le projet final. La maîtrise vient ensuite avec la pratique, notamment en combinant HTML et CSS.
Quelle est la différence entre HTML et CSS ?
HTML décrit la structure et le sens du contenu (titres, paragraphes, formulaires). CSS gère l'apparence (couleurs, tailles, mise en page). Ce cours porte sur HTML ; le cours CSS fondamentaux lui fait suite.
Le HTML sémantique est-il important pour le référencement ?
Oui. Une hiérarchie de titres claire, des éléments comme main, article ou nav et des textes alternatifs pertinents aident les moteurs de recherche à comprendre la page, et améliorent l'accessibilité.
Ce cours, raconté pour ton métier
Dis ce que tu veux savoir faire : « HTML fondamentaux » prend sa place dans ton parcours, avec des exemples de ton secteur. Les notions restent celles du cours.