Valider, bien écrire, et le projet de la Librairie

En Java, une erreur de syntaxe est sans appel : le compilateur refuse le programme, et rien ne s'exécute tant qu'elle n'est pas corrigée. HTML ne refuse jamais rien. Ouvrez dans un navigateur une page où un paragraphe n'est pas fermé, où une liste contient un titre, où deux éléments portent le même identifiant : elle s'affiche, souvent correctement. Le navigateur a réparé la page, à sa façon, sans rien dire.

Cette indulgence a fait le succès du Web, mais elle a un prix : une erreur invisible aujourd'hui casse demain la mise en forme CSS, le script JavaScript, ou la lecture par un lecteur d'écran. Le programmeur web doit donc faire lui-même ce que le compilateur Java faisait pour lui : valider ses pages. Ce dernier chapitre rassemble les outils et les règles d'écriture d'un HTML propre, puis assemble le projet fil rouge du livre : le site complet de la Librairie du Campus.

10.1 Valider une page

Trois outils, complémentaires :

• Le validateur du W3C (validator.w3.org) : on y colle le code, on y dépose le fichier ou on y donne l'adresse de la page. C'est la référence, tenue à jour avec le standard.
• html-validate : un validateur qui s'exécute sur votre ordinateur, dans un terminal, et vérifie tout un dossier d'un coup. Il ajoute au standard des règles d'accessibilité et de style. C'est lui qui a vérifié chaque page de ce livre.
• Les outils de développement du navigateur (touche F12) : l'onglet Éléments montre l'arbre que le navigateur a réellement construit, après réparation ; l'onglet Console signale certaines erreurs, et l'onglet Lighthouse audite l'accessibilité et le référencement.

10.1.1 Valider dans un terminal

html-validate est un programme écrit en JavaScript, distribué par npm, le gestionnaire de paquets de Node.js, que nous retrouverons au livre Vue. Avec Node.js installé :

$ npm install --save-dev html-validate
$ npx html-validate --preset recommended *.html

Le réglage recommended active toutes les règles, dont celles d'accessibilité (une image sans alt est une erreur) ; standard se limite à la structure. Le programme se tait si tout va bien, et liste sinon chaque erreur avec sa ligne et sa colonne.

10.1.2 Lire les messages

Voici une page qui accumule les erreurs classiques.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
</head>
<body>
  <center><h1>Catalogue</h1></center>
  <p>Nos <strong>nouveautés</p></strong>
  <img src="couverture.jpg">
  <p id="prix">32,00 €</p>
  <p id="prix">89,00 €</p>
  <label for="quantite">Quantité</label>
  <input id="qte" name="quantite" type="number">
  <ul>
    <p>Programmation Java</p>
  </ul>
</body>
</html>

page-fautive.html
   3:2   error  <head> element must have <title> as content                element-required-content
   7:4   error  <center> is deprecated: use CSS instead                    deprecated
   7:4   error  <center> element is not permitted as content under <body>  element-permitted-content
   8:4   error  Element <p> is implicitly closed by sibling                no-implicit-close
   8:11  error  Unclosed element '<strong>'                                close-order
   8:29  error  End tag '</p>' seen but there were open elements           close-order
   9:4   error  <img> is missing required "alt" attribute                  wcag/h37
  11:10  error  Duplicate ID "prix"                                        no-dup-id
  15:6   error  <p> element is not permitted as content under <ul>         element-permitted-content

✖ 9 problems (9 errors, 0 warnings)

Chaque ligne donne la position (ligne:colonne), le message et le nom de la règle, qu'on peut chercher dans la documentation de l'outil. Comme avec le compilateur Java, on corrige la première erreur d'abord : une seule balise mal fermée en entraîne souvent plusieurs autres (les lignes 8:4, 8:11 et 8:29 décrivent une seule faute).