📘 Chapitre 6 – Validation W3C et bonnes pratiques

1. 🎯 Objectif pédagogique

Être capable de vérifier la validité d’une page HTML selon les standards du W3C et d’appliquer les bonnes pratiques d’écriture de code pour garantir la qualité et la compatibilité du site web.

2. 📚 Concepts abordés

  • Validation HTML via le W3C Validator
  • Erreurs courantes à corriger (balises non fermées, attributs manquants, structure incorrecte)
  • Notions de compatibilité navigateur et respect des standards
  • Bonnes pratiques de développement : indentation, commentaires, accessibilité, alt sur les images
  • Utilisation des outils intégrés aux navigateurs (inspecteur de code)

3. 🧠 Explication théorique

Le W3C (World Wide Web Consortium) définit les standards du web. Pour vérifier qu’une page HTML respecte ces standards, on utilise un validateur tel que : https://validator.w3.org/

Principales bonnes pratiques :

  • Toujours inclure <!DOCTYPE html> pour déclarer le type de document.
  • Utiliser des balises fermées correctement.
  • Respecter la hiérarchie des titres (<h1> puis <h2>, etc.).
  • Fournir des attributs alt pour les images et des titres significatifs pour les pages.
  • Commenter le code pour plus de clarté.
  • Indenter correctement le code pour la lisibilité.

Exemple de code avec bonnes pratiques : 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page de test</title>
  </head>
  <body>
    <header>
      <h1>Bienvenue</h1>
    </header>
    <main>
      <p>Page valide et conforme aux standards.</p>
    </main>
    <footer>
      <p>&copy; 2025</p>
    </footer>
  </body>
</html>

4. 🛠 Tutoriel pratique

Résumé du travail : Créer une page HTML simple, puis vérifier sa validité via l’outil en ligne du W3C et corriger les éventuelles erreurs.

Arborescence du projet :

mon_projet/
└── index.html

Étape 1 : Créer une page HTML avec erreurs volontairement 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Test Validation</title>
  </head>
  <body>
    <h1>Page test<h1>
    <img src="image.jpg">
  </body>
</html>

Étape 2 : Vérifier la page sur https://validator.w3.org/

  • Copier/coller le code dans le validateur.
  • Analyser les erreurs (balises <h1> non fermées, attribut alt manquant).

Étape 3 : Corriger les erreurs 

<h1>Page test</h1>
<img src="image.jpg" alt="Image d’illustration">

5. 🧾 Résumé et points-clés

  • Le W3C Validator est un outil essentiel pour détecter les erreurs de syntaxe.
  • Un code valide améliore la compatibilité et le SEO.
  • Toujours suivre les bonnes pratiques : indentation, commentaires, balises fermées, attributs obligatoires.