Validation W3C en mode batch de fichiers HTML avec Nu HTML Checker

Logo

Introduction

Les articles que vous écrivez exploitent HTML 5 et CSS 3. La validation des feuilles de style (fichiers *.css) avec la syntaxe et la norme CSS 3 est relativement aisée, juste quelques fichiers à faire valider une fois pour toutes par upload avec le service W3C en ligne (W3C CSS Validation Service).

Le même service W3C existe en ligne pour la validation de la conformité HTML d’une page (W3C Markup Validation Service), ce service est formidable mais cela peut vite devenir très fastidieux quand le volume de pages à valider est élevé.

W3C Markup Validation Service

L’information n’est pas mise en avant, mais il est tout à fait possible de valider localement en masse des pages grâce à Nu Html Checker, technologie utilisée par le service en ligne du W3C. C’est le sujet abordé ici.

Outre les erreurs de syntaxe, Nu Html Checker est également le compagnon idéal lors des migrations massives vers HTML 5 et UTF-8. L’outil détecte toutes les balises HTML 4 et balises meta obsolètes avec HTML 5 comme par exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
                "http://www.w3.org/TR/html4/strict.dtd">

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<meta http-equiv="content-language" content="fr">

Pourquoi continuer en 2016 à valider la syntaxe HTML des pages ?

Avant l’avènement d’HTML 5, l’affichage sur les sites des logos des certifications W3C HTML 4 Strict ou Transitional et CSS 2.1 était un gage de qualité et de compatibilité avec les navigateurs, surtout à une époque où les comportements pouvaient beaucoup différer d’un navigateur à l’autre, notamment entre Microsoft Internet Explorer et les autres (Chrome, Firefox, Safari).

Mais ça c’était avant… Avec HTML 5 / CSS 3 et depuis la version 9 de Microsoft Internet Explorer qui intègre désormais le moteur Gecko, moteur également utilisé par Chrome, FireFox… tout a bien changé. Les différences de comportement HTML et CSS entre Microsoft Internet Explorer et les autres navigateurs sont presque toutes gommées. Pour preuve, les logos de certifications HTML 5 n’existent pas sur les sites.

Il y a deux autres raisons majeures pour continuer à vérifier la validité du code HTML de ses pages, même avec HTML 5.

  • Les erreurs de syntaxe peuvent perturber le code Javascript et produire des effets inattendus, notamment avec l’utilisation des méthodes document.getElementById, document.getElementsByTagName, object.getAttribute…
  • Des problèmes de performances peuvent apparaître lorsque les agents des navigateurs traite un arbre DOM HTML mal structuré à cause d’erreurs de syntaxe.

La norme W3C HTML 5.1 propose des paragraphes intéressants sur les effets de bord des erreurs de syntaxe, d’imbrications et de valeurs pour les attributs :

Installation de Nu HTML Checker

Nu HTML Checker est un outil qu’il est possible d’exploiter en local sur son poste pour valider en masse des pages, que les pages soit en local ou sur le web.

Java doit être installé car Nu HTML Checker est une archive Java de 25 Mb environ (vnu.jar). Vérifier que Java est bien disponible sur le poste, dans une commande DOS : 
java -version

java version "1.8.0_101"
Java(TM) SE Runtime Environment (build 1.8.0_101-b13)
Java HotSpot(TM) 64-Bit Server VM (build 25.101-b13, mixed mode)
Télécharger le fichier zip contenant Nu HTML Checker à l’adresse suivante : https://github.com/validator/validator/releases/latest. En septembre 2016, il s’agit de la version 16.6.29 : vnu.jar_16.6.29.zip.

Extraire le fichier vnu.jar de l’archive zip téléchargée vers le répertoire de son choix. vnu.jar est installé ici dans le répertoire D:\software\tools\vnu et la décompression réalisée avec 7zip.

mkdir D:\software\tools\vnu

cd D:\software\tools\vnu

D:\Software\tools\7zip\7z.exe e D:\Logitheque\vnu.jar_16.6.29.zip dist\vnu.jar

Nu HTML Checker est prêt à l’emploi.

Utiliser Nu Html Checker

Encodage de l’invite de commande DOS

Avant de commencer avec Nu Html Checker, vérifier le code page des caractères des invites de commandes DOS. Si le système d’exploitation est en français, par défaut le code page est 850 (OEM Latin 1 Multilingue). Pour consulter le code page par défaut, utiliser la commande DOS chcp.

chcp

Page de codes active : 850

Il faut basculer en unicode UTF-8 pour utiliser Nu Html Checker car dans le cas contraire, la sortie est mal formée, exemple :

error: Using the ÔÇ£metaÔÇØ element to specify

2 options, soit le code page avec la commande chcp est modifié en UTF-8 dans l’invite de commandes DOS dans laquelle Nu Html Checker va être utilisé :

chcp 65001

Page de codes active : 65001

ou bien le code page est modifié dans la base de registres en ajoutant la chaîne Autorun=chcp 65001 dans la clé [HKEY_CURRENT_USER\Software\Microsoft\Command Processor]. Cette opération affectera toutes les invites de commandes DOS.

Valider les fichiers HTML dans un répertoire

Et c’est parti pour une validation en masse de fichiers *.html, *.htm, *.xhtml. Dans l’exemple ci-dessous le répertoire D:\www\uat est inspecté, la recherche est récursive, les sous répertoires sont également inspectés.

cd D:\software\tools\nvu

java -jar vnu.jar --skip-non-html --format gnu  D:\www\uat
          "file:/D:/www/uat/google-android-ssh-putty.html":106.1-106.7: error: Element “figre” not allowed as child
of element “p” in this context. (Suppressing further errors from this subtree.)
"file:/D:/www/uat/google-android-ssh-putty.html":108.1-108.12: error: End tag “p”
implied, but there were open elements.
"file:/D:/www/uat/google-android-ssh-putty.html":106.1-106.7: error: Unclosed element “figre”.
"file:/D:/www/uat/google-android-ssh-putty.html":108.1-108.12: error: Element “figcaption”
not allowed as child of element “article” in this context. (Suppressing further errors from this subtree.)
"file:/D:/www/uat/google-android-ssh-putty.html":109.1-109.9: error: Stray end tag “figure”.
"file:/D:/www/uat/google-android-ssh-putty.html":112.89-112.92: error: No “p” element in scope
but a “p” end tag seen.

Les options sont simples :

  • --skip-non-html : pour éviter que le programme n’inspecte des fichiers PDF, Word, etc. Seules les extensions *.html, *.htm, *.xhtml et *.xht sont scrutées.
  • --format : gnu, text, xml ou json. Les 2 derniers formats ne sont pas humainement exploitables, ils sont destinés à être manipulés par des programmes.

Dans l’exemple ci-dessus, des erreurs de syntaxe dans le fichier google-android-ssh-putty.html entre les lignes 106 et 112. Le format 106.1-106.7 donné dans la sortie nous précise tout simplement la localisation de l’erreur : ligne 106, colonne 1, ligne 106 colonne 7.

Cas des fichiers HTML incluant des scripts PHP

Lorsque les fichiers HTML embarquent du code PHP :

<div>
   <?php include('config.inc'); ?>
</div>

Combiner la commande findstr et l’option /V avec la sortie de vnu.jar afin d’écarter la chaîne <?php :

java -jar vnu.jar --skip-non-html --format gnu  D:\www\uat 2>&1 | findstr /v "<?"

Nu HTML Checker considère en effet qu’il s’agit d’une balise XML formée. Dans les futures versions, peut être que ce contexte sera écarté par défaut.

"file:/D:/www/uat/1.html":549.5-549.6: error: Saw “<?”.
Probable cause: Attempt to use an XML processing instruction in HTML.
(XML processing instructions are not supported in HTML.)

Nu HTML Checker et HTML 4, ignorer une liste d’erreurs avec findstr

HTML 4 c’est terminé, mais les migrations vers HTML 5 et l’encodage UTF-8 ne sont pas terminées pour tous. Nu HTML Checker considère comme des erreurs les balises doctype et meta HTML 4 ci-dessous, ainsi que l’utilisation de l’encodage ISO-8859-1 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
                "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="fr">
"file:/D:/www/uat/unix-vi-guide-pratique.htm":1.1-1.90: info warning: Obsolete doctype.
Expected “<!DOCTYPE html>”.
"file:/D:/www/uat/unix-vi-guide-pratique.htm":4.3-4.74: error: Internal encoding declaration “iso-8859-1”
disagrees with the actual encoding of the document (“utf-8”).
"file:/D:/www/uat/unix-vi-guide-pratique.htm":4.3-4.74: error: Bad value “text/html; charset=iso-8859-1”
for attribute “content” on element “meta”: “iso-8859-1” is not a preferred encoding name. The preferred label
for this encoding is “windows-1252”.
"file:/D:/www/uat/unix-vi-guide-pratique.htm":5.3-5.51: error: Using the “meta” element to specify the
document-wide default language is obsolete. Consider specifying the language on the root element instead."
"file:/D:/www/uat/unix-vi-guide-pratique.htm":633.71-633.71: error: Malformed byte sequence: “e9”.

Pour continuer à exécuter la validation sur les documents au format HTML 4 qui n’ont pas encore été migrés en HTML 5, UTF-8, créér un fichier texte avec la liste de ces erreurs à ignorer :

ignore_errors.txt
<?
Obsolete doctype
Internal encoding declaration
Malformed byte sequence
is not a preferred encoding name
Consider specifying the language on the root element instead

Et en utilisant, l’option /g de la commande findstr avec ce fichier, on retrouve une validation par Nu HTML Checker exploitable sur les fichiers HTML 4.

java -jar vnu.jar --skip-non-html --format gnu  D:\www\uat 2>&1 | findstr /v /g:ignore_errors.txt
          "file:/D:/www/uat/sybase-ase-iq-comparaison.htm":2013.42-2013.56: error: The element “h3” must not appear 
as a descendant of the “th” element.

Autres usages

Une liste de fichiers peut être donnée :

java -jar vnu.jar --skip-non-html --format gnu fichier1 fichier2  2>&1 | findstr /v /g:ignore_errors.txt

Une liste d’URLs également :

java -jar vnu.jar --skip-non-html --format gnu "http://url1" "http://url2" 2>&1 | findstr /v /g:ignore_errors.txt

Conclusion

Voilà un outil dont il est difficile de se passer lorsqu’on désire valider en masse des fichiers HTML et être sur de déployer du code de qualité qui ne va pas engendrer des dégradatations de performances ou encore des mauvaises suprises et dysfonctionnements lorsque Javascript doit manipuler les balises.