Déboguer CSS - Valider HTML

Il est inutile de vouloir déboguer une page dont l'HTML n'est pas valide.

La page qui va nous servir d'exemple a été trouvée sur un forum. Elle a été réduite à sa plus simple expression, des bordures ont été ajoutées et elle et se présente sous trois formes :

Les copies d'écran ci-dessous donnent un aperçu des différences entre les navigateurs.

Utiliser HTML Validator

Résultats de la validation SGML :

validation sgml

Cette validation, effectuée localement, correspond à celle service en ligne du W3C.

HTML Validation Result
----------------------
file://localhost/E:/css.tests/exemple_1a.html

line 149 column 66 - Error: literal is missing closing delimiter
line 149 column 84 - Error: end tag for "img" omitted, but OMITTAG NO was specified
line 149 column 22 - Info: start tag was here
line 151 column 5 - Error: end tag for element "h2" which is not open
line 151 column 17 - Error: end tag for element "h2" which is not open
line 155 column 27 - Error: end tag for "a" omitted, but OMITTAG NO was specified
line 155 column 5 - Info: start tag was here
line 157 column 12 - Error: document type does not allow element "a" here; assuming missing "li" start-tag
line 159 column 5 - Error: end tag for "li" omitted, but OMITTAG NO was specified
line 157 column 1 - Info: start tag was here
7 errors / 0 warnings

Résultats de la validation HTML Tidy :

validation tidy

HTML Validation Result
----------------------
file://localhost/E:/css.tests/exemple_1a.html

line 75 column 22 - Warning: <img> attribute with missing trailing quote mark
line 76 column 1 - Warning: discarding unexpected </h2>
line 76 column 13 - Warning: discarding unexpected </h2>
line 78 column 5 - Warning: missing </a> before </li>
line 79 column 1 - Warning: missing <li>
Info: Doctype given is "-//W3C//DTD XHTML 1.0 Strict//EN"
Info: Document content looks like XHTML 1.0 Strict
0 errors / 5 warnings

HTML Validator propose de corriger le code avec des options intéressantes dans une autre situation ou d'aller d'erreur en erreur pour effectuer les corrections.

On va donc de ligne en ligne et on corrige toutes les erreurs en commençant par HTML Tidy.

On constate ainsi que quelques problèmes ont disparu et on passe donc à la validation de CSS.