HTML — Projet pratique et validation W3C
Construire le squelette HTML complet de WebFolio
Concepts Théoriques
Ce chapitre est 100% pratique. Pas de nouvelle théorie — vous allez assembler tout ce que vous avez appris dans les chapitres 0 à 3 pour construire le squelette HTML complet de WebFolio.
Pourquoi un chapitre entièrement pratique ?
La programmation ne s'apprend pas en lisant — elle s'apprend en faisant. Vous connaissez maintenant toutes les balises HTML nécessaires. Il est temps de les combiner dans un vrai projet cohérent.
Les règles d'un bon HTML
Avant de coder, rappelons les principes :
- Un seul <h1> par page — c'est votre titre principal, celui que Google lit en premier.
- Hiérarchie logique des titres — <h1> → <h2> → <h3>, pas de niveaux sautés.
- Balises sémantiques — <header>, <nav>, <main>, <section>, <footer> au lieu de <div> partout.
- Alt sur toutes les images — descriptif pour les images informatives, vide (alt="") pour les décoratives.
- Labels sur tous les champs — chaque <input> a un <label> avec for="id-du-champ".
- Contenu réel — du VRAI texte qui parle de VOUS, jamais de Lorem Ipsum.
- Validation W3C — 0 erreur sur validator.w3.org.
La validation W3C
Le W3C (World Wide Web Consortium) définit les standards du HTML. Leur validateur (validator.w3.org) vérifie que votre code respecte ces standards.
Pourquoi valider ?
- Un HTML invalide peut causer des bugs d'affichage imprévisibles
- Les navigateurs "devinent" comment afficher du HTML cassé — chacun différemment
- Un HTML valide est mieux compris par Google (SEO)
- C'est un signe de professionnalisme
Types d'erreurs courantes :
- Balise fermante manquante (<p> sans </p>)
- Attribut obligatoire manquant (alt sur <img>)
- Imbrication incorrecte (<p><div>...</div></p> — un <div> bloc ne peut pas être dans un <p> en ligne)
- id en double (chaque id doit être unique sur la page)