HTML 5 & CSS 3

Cette formation présente les fondamentaux du développement web : structurer une page avec HTML 5, la mettre en forme avec CSS 3 et la rendre accessible à tous. Conçue pour deux journées de formation en présentiel, elle se lit aussi bien d’une traite que chapitre par chapitre. L’accessibilité numérique en est le fil rouge : elle est abordée à chaque étape plutôt que reléguée à la fin.

Objectifs pédagogiques

À l’issue de cette formation, vous serez capable de :

• écrire une page web valide et bien structurée en HTML 5, en utilisant les balises sémantiques appropriées ;
• construire des tableaux de données et des formulaires accessibles ;
• mettre en forme une page à l’aide de CSS 3 : sélecteurs, modèle de boîte, texte, couleurs et arrière-plans ;
• réaliser des mises en page modernes avec Flexbox et CSS Grid, sans recourir aux techniques obsolètes ;
• adapter une page à toutes les tailles d’écran (responsive design) ;
• appliquer les bonnes pratiques d’accessibilité numérique (WCAG 2.2 / RGAA) à chaque étape du développement.

Public et prérequis

Cette formation s’adresse à des développeurs débutants ou à des profils techniques n’ayant jamais (ou peu) pratiqué le développement web front-end. Aucune connaissance préalable de HTML ou de CSS n’est requise. Une familiarité avec la manipulation de fichiers et l’utilisation d’un éditeur de texte est suffisante.

Matériel et environnement

• Un éditeur de code : Visual Studio Code (recommandé, avec l’extension Live Server), ou tout éditeur de texte.
• Un navigateur récent (Firefox ou Chrome/Edge) avec ses outils de développement (touche F12).
• Aucun serveur ni installation particulière : un fichier .html s’ouvre directement dans le navigateur.
• Sites de référence à garder ouverts : MDN Web Docs (developer.mozilla.org, en français) et le validateur du W3C (validator.w3.org).

Mettre en pratique

Chaque chapitre se termine par les exercices à réaliser. Ils sont regroupés en deux pages de travaux pratiques, corrigés à l’appui : le TP HTML (exercices 1 à 7) et le TP CSS (exercices 8 à 14). Le fil rouge est la construction du mini-site touristique d’une ville de votre choix.

Si le temps vous manque

Vous pouvez d’abord sauter les exercices bonus, puis traiter l’exercice 5 (tableau complexe) en lisant simplement son corrigé, puis l’exercice 12 (gabarit de page) de la même façon. En revanche, ne sautez jamais l’exercice 6 (le formulaire), les exercices 10 et 11 (Flexbox et Grid), l’exercice 13 (responsive) ni le test final au clavier : ils portent les objectifs centraux de la formation.

Pour consolider

Une fois la formation terminée, vous pouvez prolonger le mini-site en plusieurs pages, puis vous relire une semaine plus tard avec une vingtaine de questions sur les pièges rencontrés (alt vide ou absent, spécificité, axes de Flexbox…). Pour la suite, notamment JavaScript, les parcours de web.dev/learn sont un bon point de départ.

Ce qui a changé depuis la première version

Ces pages ont été révisées en juillet 2026. Si vous avez consulté la première version (2024), voici les principales corrections techniques apportées :

• Flexbox : les valeurs de flex-direction sont row-reverse et column-reverse ; gap est désormais utilisable en Flexbox.
• box-sizing : seules les valeurs content-box et border-box existent, padding-box ayant été retirée de la spécification.
• Arrière-plans : la propriété s’écrit background-attachment, de valeur par défaut scroll ; background-size a été ajoutée.
• Unités : rem et em sont définies par rapport à la taille de police (de la racine pour rem, de l’élément pour em).
• Position : ajout de position: sticky et précision sur position: absolute (relatif au plus proche ancêtre positionné).
• Tableaux : l’élément est <thead> ; rowspan et colspan sont des attributs HTML, non des propriétés CSS.
• Formulaires : ajout de <select>, de autocomplete (critère WCAG 2.2) et de mises en garde sur placeholder.
• Métadonnées : ajout de la balise viewport, indispensable ; la métadonnée keywords est obsolète.
• Liens : accesskey et title ne sont plus présentés comme des bonnes pratiques d’accessibilité.
• Référentiels : HTML est un standard vivant maintenu par le WHATWG ; l’accessibilité est alignée sur WCAG 2.2 et le RGAA 4.1.2.

1. Le web, les standards et l'accessibilitéLes trois langages du web, les organismes de normalisation et les référentiels d'accessibilité (WCAG, RGAA).
2. Syntaxe HTML 5 et structure sémantique d'une page webSyntaxe de HTML 5, squelette d'une page, métadonnées, balises sémantiques, et du SEO au GEO.
3. Principales balises HTML 5Titres, paragraphes, listes, liens, images, audio, vidéo et éléments neutres.
4. Tableaux et formulaires en HTML 5Tableaux de données et formulaires accessibles en HTML 5.
5. Syntaxe CSS 3, sélecteurs et propriétés usuellesAnatomie d'une feuille de style, sélecteurs, cascade, variables CSS, modèle de boîte, texte et arrière-plans.
6. Positionnement des éléments en CSSDu flux normal aux grilles : position, flottants, Flexbox et CSS Grid.
7. Responsive design : s'adapter à tous les écransMeta viewport, dimensions fluides et media queries.
8. Accessibilité et CSS : approfondissements et boîte à outilsFocus visible, préférences des utilisateurs, premiers pas avec ARIA et outils de vérification.
9. Travaux pratiques HTML 5 : le mini-site d'une villeSept exercices corrigés pour pratiquer HTML 5 : structure sémantique, contenus, tableaux, formulaire et audit d'accessibilité.
10. Travaux pratiques CSS 3 : mettre en forme le mini-siteSept exercices corrigés pour pratiquer CSS 3 : charte graphique, modèle de boîte, Flexbox, Grid, responsive design et accessibilité.