Valide

Erreurs de code html

La permissivité des navigateurs

Dans la plupart des langages, la moindre erreur dans le code entraîne une non-exécution de ce code. C'est le cas dans les navigateurs avec le langage css ou avec le langage javascript.

Mais ce n'est pas le cas, avec ces mêmes navigateurs, pour le langage html : vous pouvez faire de nombreuses erreurs dans votre code html et obtenir un affichage correct ou au moins un affichage.

Toutefois le cumul d'erreurs éloigne très vite le rendu de ce qui était attendu. On peut très vite obtenir quelque chose qui ne ressemble pas du tout à ce que l'on voulait.

Exemple : erreur dans l'écriture d'une balise

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> erreur dans le code html  </title>
         
    </head>
    <body>
             <p>On veut baliser le mot <strong>important</stng> avec la balise <code>strong</code> 
             (par défaut  cette balise, qui signale du texte important, est stylée 
             avec une mise en gras du texte) 
             mais on a fait ici une faute de frappe dans la balise fermante.</p>
             
             <p>Le résultat : le navigateur considère que tout est pris dans la balise strong. </p>
     </body>
</html>

et maintenant le même code mais en ne faisant pas de faute de frappe dans le nom de la balise, seul le mot important est mis en gras par le navigateur, comme attendu :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> erreur dans le code html  </title>
         
    </head>
    <body>
             <p>On veut baliser le mot <strong>important</strong> avec la balise <code>strong</code> 
             (par défaut  cette balise, qui signale du texte important, est stylée 
             avec une mise en gras du texte) 
             mais on a fait ici une faute de frappe dans la balise fermante.</p>
             
             <p>Le résultat : le navigateur considère que tout est pris dans la balise strong. </p>
     </body>
</html>

Un autre exemple : chevauchement de balises

Un élément html (délimité par une balise ouvrante et une balise fermante) peut être contenu dans un autre élément html mais les éléments ne peuvent pas "se chavaucher". En d'autres termes, une structure telle que la suivante est correcte : <baliseX> <baliseY> </baliseY> </baliseX>

Mais le chevauchement comme suit est incorrect : <baliseX> <baliseY> </baliseX> </baliseY>

Le navigateur ne signalera pourtant pas d'erreur et cherchera à interpréter comme il le peut. Mais là aussi, on aura souvent des surprises à l'affichage et le résultat ne sera souvent pas celui qui était désiré : c'est normal, le navigateur ne devine pas vos intentions, il essaie d'afficher comme il le peut en appliquant un algorithme de correction d'erreurs prédéfini.

Corriger le code html d'un document

Comme le navigateur ne signale pas les erreurs de code, on a besoin d'un logiciel tiers pour faire ce travail et corriger les erreurs.

L'outil à utiliser est proposé sur le site du w3c (organisme qui valide les évolutions du langage html) à cette adresse : https://validator.w3.org/#validate_by_upload.

Dans l'écran qui se présente comme ci-dessous :
validator
on clique sur le bouton "parcourir", on sélectionne le fichier html à vérifier, puis on clique sur le bouton "check". On a ensuite une page qui affiche une analyse de notre fichier html.

Vous veillerez à passer au validator toutes les pages que vous écrirez afin de prendre de bonnes habitudes de codage.