Les validateurs HTML et CSS - Le contrôle qualité des pyramides

Le navigateur est très indulgent : quand tu oublies un attribut ou que tu fais une faute de frappe dans le nom d'une propriété CSS, il n'affiche aucune erreur et essaie simplement, en silence, de deviner ce que tu voulais dire. La page « fonctionne à peu près » - jusqu'au jour où, dans un autre navigateur ou dans un lecteur d'écran, elle s'écroule comme des blocs mal ajustés. Les pharaons d'Égypte ne construisaient pas de pyramides sans plans ni contrôle qualité. Chaque bloc devait être parfaitement ajusté. Dans le développement web, le rôle de « contrôleur qualité » est tenu par les validateurs - des outils qui vérifient la validité du code.

W3C Markup Validator

Le W3C Markup Validation Service (validator.w3.org) est l'outil officiel du W3C pour vérifier la validité du code HTML. Tu peux l'utiliser de trois façons :

• Validate by URI - saisis l'adresse d'un site web
• Validate by File Upload - envoie un fichier HTML depuis ton disque
• Validate by Direct Input - colle directement du code HTML

La vérification se déroule toujours de la même façon : tu vas sur validator.w3.org, tu fournis une adresse, un fichier ou du code collé, tu cliques sur le bouton Check, puis tu analyses les résultats et tu corriges les erreurs en partant du haut de la liste - une seule erreur peut en déclencher plusieurs autres. Le validateur classe ses messages en erreurs (Error), en avertissements (Warning) et en informations (Info). Corrige toujours les erreurs, et lis le reste attentivement.

Les erreurs typiques détectées par le validateur :

L'erreur la plus fréquente est une image sans texte alternatif. La spécification HTML exige un attribut alt sur <img>, donc le validateur signale son absence :

1<!-- ERREUR : attribut alt manquant sur img -->
2<img src="pyramid.jpg">
3
4<!-- CORRECT : -->
5<img src="pyramid.jpg" alt="La Grande Pyramide de Gizeh">

La correction ajoute seulement l'attribut - l'image, son adresse et l'aspect de la page ne changent pas. <img> est un élément vide : il n'a pas de balise fermante, tu le termines donc par un simple >. Une barre oblique avant le chevron est autorisée mais ne change rien, et le validateur n'affiche à son sujet qu'un message d'information.

Le deuxième exemple est un paragraphe non fermé. Il y a ici un piège intéressant - regarde bien le code :

1<!-- MAL : balise non fermée -->
2<p>Texte du paragraphe
3<p>Un autre paragraphe</p>
4
5<!-- CORRECT : -->
6<p>Texte du paragraphe</p>
7<p>Un autre paragraphe</p>

La spécification HTML permet d'omettre </p> quand un autre <p> ou un élément de bloc, par exemple un <div>, commence juste après le paragraphe. Le validateur ne signalera pas ce cas précis, et le navigateur fermera lui-même le paragraphe - mais tu perds le contrôle de l'endroit où il se termine. Un <div> ou un <strong> non fermé, en revanche, le validateur le repérera (message « Unclosed element »), alors ferme chaque balise explicitement - c'est ce que je te recommande.

La troisième erreur passe facilement inaperçue dans un long fichier : le même identifiant utilisé deux fois. L'attribut id doit être unique dans tout le document :

1<!-- ERREUR : ID en double -->
2<div id="header">En-tête</div>
3<div id="header">Un autre en-tête</div>
4
5<!-- CORRECT : -->
6<div id="header">En-tête</div>
7<div id="subheader">Un autre en-tête</div>

Ce n'est pas un détail cosmétique : <label for>, les ancres avec # et aria-describedby désignent un élément par son id, si bien qu'en cas de doublon, ils visent le premier élément correspondant. Une classe peut se répéter, un identifiant jamais.

N'oublie pas non plus que le validateur vérifie la conformité à la spécification HTML, et non l'accessibilité. Un champ <input> sans étiquette est valide à ses yeux - ce genre de problème, tu le repéreras avec Lighthouse ou axe, que tu as découverts dans le module sur l'accessibilité.

W3C CSS Validator

Un outil semblable existe pour le CSS (jigsaw.w3.org/css-validator/). Il vérifie :

• La validité de la syntaxe CSS
• Les erreurs dans les noms de propriétés
• Les valeurs invalides

Regarde deux erreurs classiques - une faute de frappe dans le nom d'une propriété et une valeur que le CSS ne comprend pas :

1/* ERREUR : propriété invalide */
2h1 {
3  colr: red;     /* devrait être : color */
4}
5
6/* ERREUR : valeur invalide */
7p {
8  font-size: grand;  /* devrait être par ex. 16px, 1rem */
9}
10
11/* CORRECT : */
12h1 {
13  color: #8b6914;
14  font-size: 2rem;
15}

Le navigateur n'affiche ici aucun message - il ignore simplement les deux déclarations, et tu te demandes pourquoi le titre n'est pas rouge. Dans les DevTools, dans l'onglet Styles, une telle déclaration est barrée et marquée d'une icône d'avertissement, et le validateur CSS te l'indique avec son numéro de ligne.

Les DevTools comme validateur

Les Chrome DevTools signalent eux aussi les erreurs dans le code :

• Le panneau Console - affiche les erreurs et les avertissements JavaScript
• Le panneau Elements - met en évidence les éléments problématiques
• Le panneau Issues - rassemble les avertissements, par exemple sur les champs de formulaire sans étiquette associée
• Lighthouse - audit complet de la page

Une bonne pratique consiste à lancer la validation après chaque modification importante du code - tout comme les architectes de l'Antiquité vérifiaient chaque nouvel étage de la pyramide. Valide toujours avant de publier : une page sans erreurs de validation fait partie des exigences du projet final de ce module.

Pratique

Dans l'éditeur ci-dessous, tu trouveras une page qui passe la validation du W3C. Colle son code dans le validateur, puis supprime volontairement un alt et regarde ce qui change :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Validation HTML et CSS</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Validation HTML et CSS</h1>
11
12    <section>
13        <h2>Code HTML valide</h2>
14        <p>Le code suivant a passé la validation W3C :</p>
15
16        <article>
17            <h3>Structure valide</h3>
18            <img src="https://placehold.co/300x200/d4af37/1a1a2e?text=Piramida"
19                 alt="La Grande Pyramide de Gizeh au coucher du soleil"
20                 width="300" height="200">
21            <p>Image avec l'attribut <code>alt</code> et des dimensions.</p>
22        </article>
23
24        <article>
25            <h3>Formulaire valide</h3>
26            <form>
27                <label for="name">Nom :</label>
28                <input type="text" id="name" name="name">
29
30                <label for="email">E-mail :</label>
31                <input type="email" id="email" name="email">
32            </form>
33        </article>
34    </section>
35
36    <section>
37        <h2>Erreurs courantes à éviter</h2>
38        <ul>
39            <li>Attribut <code>alt</code> manquant sur les images</li>
40            <li>Balises HTML non fermées</li>
41            <li>Attributs <code>id</code> en double</li>
42            <li>Éléments de type bloc à l'intérieur d'éléments en ligne</li>
43            <li>Absence de <code>&lt;!DOCTYPE html&gt;</code></li>
44        </ul>
45    </section>
46</body>
47</html>

Souviens-toi : le validateur est le chef de chantier qui fait le tour de la pyramide, sa coudée à la main - plus tôt il repère un bloc de travers, moins il faudra démonter.