Le W3C propose sur son site web un outil appelé le « Validateur » (« Validator » en anglais).
Le validateur est une sorte de programme qui va analyser votre code source et vous dire s'il est correctement écrit ou s'il comporte des erreurs que vous devez corriger.
Souvenez-vous : le W3C a établi des normes. Il est nécessaire de les respecter, pour qu'on soit sûr que tous les sites web parlent la même « langue ».
Il existe un validateur pour HTML et un validateur pour CSS (à mettre dans vos favoris !). Celui pour CSS comportant quelques bugs (il signale comme invalides des feuilles CSS qui sont tout à fait valides), nous ne nous y attarderons pas. Par contre, le validateur HTML va être très intéressant pour nous : voici son adresse http://validator.w3.org.
Vous pouvez valider votre page web de trois façons différentes, c'est pour cela qu'il y a trois onglets :
Pour le moment, notre site web n'est pas encore disponible sur le Web, ce qui fait qu'il n'a pas d'adresse URL. Le mieux est donc d'envoyer le fichier .html que l'on a fait ou encore de copier-coller directement le code HTML.
Si vous envoyez votre code HTML et que tout se passe bien, le validateur va vous répondre avec le message représenté à la figure suivante.
Le validateur du W3C nous informe que notre page ne comporte pas d'erreur
Dans ce cas, cela signifie que tout va bien et que vous avez bien construit votre page !
Malheureusement, il arrivera souvent que vous ayez des erreurs. Dans ce cas, évitez de paniquer comme cela :
AU SEEECOUUUUUUUURS !!! Ma page web n'est pas valide, je ne vais pas m'en sortir, je suis cerné par les erreurs, faites quelque chose aidez-mmmoiiiiii !
Vous aviez une belle page web, elle s'affichait bien, elle était jolie, et pourtant le validateur vous répond avec un message rouge inquiétant, en vous disant que votre page web n'est pas bien construite.
Tout d'abord, mettez-vous bien ceci en tête : ce n'est pas parce que votre page web s'affiche correctement qu'elle ne comporte pas d'erreur. Votre page web peut être toute belle et comporter beaucoup d'erreurs.
Quel intérêt de les corriger alors ?
Il faut savoir que les navigateurs « essaient » de ne pas afficher les erreurs, lorsqu'ils en rencontrent, pour ne pas perturber l'internaute. Mais rien ne vous dit que d'autres navigateurs ne vont pas se comporter bizarrement !
Avoir une page web valide, c'est donc avoir la possibilité de dormir tranquille en sachant que l'on a bien fait les choses comme il faut. Cela simplifie le travail des programmes qui lisent les pages web.
De plus, et c'est vérifié, une page web correctement construite aura plus de chances d'être mieux positionnée dans les résultats de recherche de Google, ce qui vous amènera… plus de visiteurs !
Voici une liste de conseils qui peuvent vous aider à résoudre les erreurs qui risquent de vous être signalées tôt ou tard :
<p>Ceci est un texte correctement placé dans un paragraphe. <br /> Les balises <br /> doivent se trouver à l'intérieur d'un paragraphe, ne l'oubliez pas</p>
Ceci est un texte en-dehors d'un paragraphe. C'est interdit. <br /> |
• Toutes vos images doivent comporter un attribut alt qui indique ce que contient l'image. Si, par hasard, votre image est purement décorative (vous ne pouvez pas en trouver de description), vous êtes autorisés à ne rien mettre comme valeur pour l'attribut alt.
<!-- L'image comporte une description --> <img src="photo.jpg" alt="Une photo de moi" />
<!-- L'image ne comporte pas de description mais a quand même un attribut alt --> <img src="deco.png" alt="" /> |
• Vos balises doivent être fermées dans l'ordre.
<!-- Les balises ne sont pas fermées dans leur ordre d'ouverture --> <p>Texte <em>important</p></em>
<!-- Les balises sont fermées dans leur ordre d'ouverture --> <p>Texte <em>important</em></p> |
Gardez bien ce schéma en tête, beaucoup de débutants font cette erreur.
• Si vos liens comportent des &, vous devez les remplacer par le code & pour éviter toute confusion au navigateur.
<!-- Exemple d'un mauvais lien en HTML --> <a href="http://www.site.com/?jour=15&mois=10&an=2000">
<!-- Exemple d'un bon lien en HTML --> <a href="http://www.site.com/?jour=15&mois=10&an=2000"> |
• Vérifiez enfin que vous n'avez pas utilisé des balises anciennes et désormais obsolètes en HTML5 (comme le vieux <frame>, la balise <marquee>…
Le validateur vous dira « Element XXX undefined » (balise inconnue) ou encore « There is no attributeXXX » (attribut inconnu).
Tout le monde fait des erreurs, alors ne paniquez pas. Corrigez pas à pas votre page web jusqu'à ce que le validateur vous affiche un beau résultat en vert.
Créé avec HelpNDoc Personal Edition: Création d'aide CHM, PDF, DOC et HTML d'une même source