HTML

La structure de toutes les pages web

Le HTML décrit le contenu et la structure de chaque page web. Des premières balises aux formulaires accessibles et au HTML sémantique, ce parcours vous donne des fondations solides pour tout le reste du développement web.

Fondations

Débutant - les bases, pas à pas

• Qu'est-ce que le HTML ? Balises et attributsDécouvrez ce qu'est le HTML et apprenez à reconnaître une balise et un attribut.
• Structurer du texte : titres, paragraphes et listesApprenez à organiser un texte avec des titres hiérarchisés, des paragraphes et des listes.
• Liens et imagesCréez des liens vers d'autres pages et affichez des images avec les balises a et img.
• Tableaux simplesPrésentez des données en lignes et en colonnes avec les balises table, tr, th et td.
• Le squelette complet d'une page HTMLAssemblez une page web complète avec le doctype et les balises html, head, meta et body.

Progression

Intermédiaire - construire de vrais projets

• Formulaires : input, label, select, textarea, buttonConstruisez des formulaires complets, accessibles et prêts pour la production.
• HTML sémantique : structurer une vraie pageRemplacez vos div anonymes par des balises qui donnent du sens à votre structure.
• Médias : audio, video, figure et figcaptionIntégrez du son, de la vidéo et des illustrations légendées sans aucun plugin.
• Attributs globaux et data-*Exploitez les attributs utilisables partout et stockez vos propres données dans le HTML.
• Préparer sa page pour le webSoignez le head de votre page : titre, description, favicon et liens externes sécurisés.

Perfectionnement

Confirmé - patterns avancés et performance

• Accessibilité : alt, hiérarchie de titres et ARIAMaîtrisez les textes alternatifs, une hiérarchie de titres exploitable au lecteur d'écran et un usage d'ARIA limité aux cas où le HTML natif ne suffit pas.
• Formulaires avancés et validation nativeExploitez required, pattern, inputmode et l'API de validation par contraintes pour des formulaires robustes sans bibliothèque externe.
• Images responsives : srcset, sizes et pictureServez la bonne image au bon écran avec srcset et sizes, réservez picture à la direction artistique et maîtrisez le lazy loading.
• SEO technique : Open Graph et données structuréesContrôlez l'aperçu de vos pages sur les réseaux sociaux avec Open Graph et visez les résultats enrichis grâce à schema.org en JSON-LD.
• Performance de chargement : defer, async, preload et prefetchOrdonnez l'exécution de vos scripts avec defer et async, puis pilotez le réseau avec preload, preconnect et prefetch.

Maîtrise

Expert - architecture, internals et cas limites

• Du HTML au DOM : parsing et récupération d'erreursComprenez comment le navigateur transforme n'importe quel flux HTML, même malformé, en arbre DOM déterministe.
• Web Components : custom elements, shadow DOM et slotsMaîtrisez le cycle de vie des custom elements, l'encapsulation du shadow DOM et la projection de contenu par slots.
• Internationalisation : lang, dir, charset et pièges UnicodeExploitez lang, dir et la déclaration d'encodage à bon escient, et déjouez les pièges de normalisation et de directionnalité Unicode.
• Sécurité côté HTML : XSS, sandbox, noopener et CSPIdentifiez les vecteurs XSS propres au balisage et déployez les défenses natives du HTML : sandbox, noopener et Content Security Policy.
• HTML interactif moderne : dialog, details, popover, contenteditableRemplacez vos bibliothèques d'UI par les primitives natives du HTML moderne : dialogues modaux, accordéons exclusifs, popovers et zones éditables.