Cours HTML / Repérer les erreurs et valider un document HTML

La validation HTML aide à trouver les erreurs de balisage qu’un navigateur peut réparer silencieusement, telles que des attributs mal formés, des balises de fermeture inattendues ou des ID en double. Après avoir corrigé les problèmes signalés, vous devez toujours vérifier le contenu et les interactions réelles de la page dans un navigateur.

Enregistrez et inspectez d’abord la page

Enregistrez le fichier HTML actuel et ouvrez-le dans un navigateur. Vérifiez que les titres, paragraphes, liens, images et formulaires apparaissent là où vous vous y attendez. Une page visible n'est pas une preuve que son balisage est valide : les navigateurs peuvent récupérer certaines erreurs et afficher un résultat différent de la structure que vous aviez prévue.

Exécutez le Nu HTML Checker

Le Nu HTML Checker peut inspecter une URL publique, un fichier téléversé ou un balisage collé. Pour un document local ou non publié, utilisez le téléversement de fichier ou l'entrée directe. Ne téléversez pas de fichiers sources contenant des mots de passe ou des données personnelles sur un service de validation public. Les règles de balises et d'attributs en cours de validation sont introduites dans Syntaxe HTML.

1. Enregistrez la dernière version du fichier HTML.
2. Sélectionnez la méthode de saisie appropriée et commencez la vérification.
3. Lisez chaque message et inspectez l'emplacement signalé ainsi que les balises ouvrantes et fermantes à proximité.
4. Corrigez le fichier, enregistrez-le, puis relancez la vérification.

Commencez par l'erreur la plus ancienne lorsque plusieurs messages apparaissent. Un seul attribut mal formé peut provoquer plusieurs messages ultérieurs. La ligne où une erreur est détectée peut ne pas être celle qui l'a causée ; une citation non fermée, par exemple, peut faire apparaître la balise suivante comme invalide. Assurez-vous de téléverser la révision enregistrée plutôt que de valider plusieurs fois un ancien fichier.

Par exemple, ce balisage répète un id :

<label for="email">E-mail</label>

<input id="email" name="email" type="email">

<label for="email">Confirmer l’e-mail</label>

<input id="email" name="email_check" type="email">

Changez l'ID du deuxième champ en email-check et mettez à jour l'étiquette for pour qu'elle corresponde. Ensuite, vérifiez que l'erreur de duplication d'ID a disparu et que chaque étiquette concentre le focus sur son propre champ. L’absence d’une balise de fin n’est pas toujours une erreur : certains éléments, y compris li dans certains contextes, peuvent omettre leur balise de fermeture selon les règles HTML.

Vérifier les exemples complets avec le Nu HTML Checker a renvoyé Duplicate ID “email”. pour le document en échec et aucune erreur pour la correction. Comparez les interactions des étiquettes séparément ; des diagnostics supplémentaires peuvent varier avec les mises à jour du vérificateur ou en fonction du contenu des fichiers.

Comparez un document en échec avec sa correction

L'exercice de validation suivant répète volontairement un ID. Enregistrez-le sous invalid.html et vérifiez-le en utilisant le mode saisie de texte ou téléversement de fichiers du vérificateur Nu HTML. Il s'agit d'un cas de test échoué, et non de code à déployer tel quel.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exercice de validation du document</title>
</head>
<body>
  <h1>Exercice de validation des libellés</h1>
  <form method="get">
    <p><label for="email">E-mail</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email">Confirmer l’e-mail</label>
      <input id="email" name="email_check" type="email"></p>
    <button type="submit">Examiner les valeurs saisies</button>
  </form>
</body>
</html>

Trouvez le diagnostic concernant l'utilisation de l'email deux fois comme ID. Un navigateur peut encore afficher deux champs, mais cela n'associe pas correctement chaque nom à son propre champ. Le document corrigé change le deuxième champ et la cible de l'étiquette en email-check.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exercice de validation du document</title>
</head>
<body>
  <h1>Exercice de validation des libellés</h1>
  <form method="get">
    <p><label for="email">E-mail</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email-check">Confirmer l’e-mail</label>
      <input id="email-check" name="email_check" type="email"></p>
    <button type="submit">Examiner les valeurs saisies</button>
  </form>
</body>
</html>

1. Enregistrez la correction sous valid.html et validez le dernier fichier plutôt que la copie précédente.
2. Cliquez sur chaque étiquette et comparez quel champ de saisie reçoit le focus. Changer un ID sans mettre à jour l’attribut for laisse l'association incorrecte.
3. Après que le diagnostic est résolu, testez toujours les destinations, le contenu et l'utilisation du clavier. Enregistrez séparément les résultats de syntaxe et d'utilisabilité.

Ne confondez pas un exemple échouant intentionnellement avec un formatage incorrect dans l'article lui-même. Un bloc de code peut montrer la chaîne qui reproduit une erreur ; le document de validation est le document autonome créé à partir de cet exemple.

La validation n'est qu'un type de vérification

Un vérificateur de syntaxe ne peut pas garantir qu'un lien mène au bon article, que le texte alternatif décrit correctement une image ou qu'un serveur gère correctement un formulaire. Ouvrez les liens, utilisez la page avec un clavier, et vérifiez une fenêtre d'affichage étroite. Pour les médias manquants, examinez les chemins, les réponses du serveur et les formats pris en charge ainsi que le balisage. Appliquez à la fois des vérifications de syntaxe et des tests de navigation réels dans Créer un petit site Web multipage.

Sachez ce que vous avez validé : un téléversement de fichier vérifie le fichier, tandis qu'une vérification d'URL inspecte le document que le serveur renvoie réellement. Sur WordPress, un thème entoure le corps de l'article, donc vérifier un fragment de manuscrit et vérifier la page publiée complète peut produire des résultats différents. Séparez les problèmes dans l'article des problèmes introduits par le thème ou un plugin.