code valide

Corriger.

J'envoie le code ci-dessous sur le w3 validator.

Il me signale une erreur. Laquelle ?
Tentez de répondre sans utiliser le validator dans un premier temps.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
           ici le contenu
    </body>
</html>

Le message obtenu est le suivant :

Element head is missing a required instance of child element title.

Il manque l'élément title dans l'entête.

Corriger.

Ci-dessous, on propose un code de page html contenant des erreurs.

Nous utilisons des balises non encore expliquées.

A l'aide des indications données par le w3c validator et de recherches sur le web, chercher à obtenir une page de code sans erreur.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
       
    </head>
    <body>
           <p> Voici une liste de livres :
		       <ul>
				   <li> La Stratégie Ender, Orson Scott Card. </li>
				   <li> Le Hussard sur le toit, Jean Giono.</li>
				   <li> Les Neuf Princes d'Ambre, Roger Zelazny </lu>
		       </ul>
           </p>
           
           <p> Quand vous ne regardez rien, pensez à retirer vos lunettes.
           
           <p> 
           		Pourquoi une poule traverse-t-elle toujours la route 
           		juste <strong>devant<strong> une voiture ?
		        <br>
		        Pour passer de l'autre côté.
           </p>
 
    </body>
</html>

Corriger les erreurs une à une dans l'ordre d'apparition. Recharger la page après chaque correction d'erreur dans le validator : une erreur de code peut en effet parfois en générer plusieurs du fait d'interprétations erronées en "cascade" provoquées par la première erreur.

Erreur 1

"Element head is missing a required instance of child element title."

Comme indiqué dans la page de cours sur le document minimal, la partie entête doit contenir un élément title.

Ajoutons en un :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Corriger du code html </title>
    </head>
    <body>
           <p> Voici une liste de livres :
		       <ul>
				   <li> La Stratégie Ender, Orson Scott Card. </li>
				   <li> Le Hussard sur le toit, Jean Giono.</li>
				   <li> Les Neuf Princes d'Ambre, Roger Zelazny </lu>
		       </ul>
           </p>
           
           <p> Quand vous ne regardez rien, pensez à retirer vos lunettes.
           
           <p> 
           		Pourquoi une poule traverse-t-elle toujours la route juste <strong>devant<strong> une voiture ?
		       <br>
		       Pour passer de l'autre côté.
           </p>
 
    </body>
</html>

Erreur 2

"Stray end tag lu"

Les balises <li> et </li> délimitent un item d'une liste (ces items sont eux-mêmes compris entre les balises <ul> et </ul>).

Ici la balise fermante du dernier item a été mal écrite puisqu'il est écrit </lu> au lieu de </li>.

Correction :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Corriger du code html </title>
    </head>
    <body>
           <p> Voici une liste de livres :
		       <ul>
				   <li> La Stratégie Ender, Orson Scott Card. </li>
				   <li> Le Hussard sur le toit, Jean Giono.</li>
				   <li> Les Neuf Princes d'Ambre, Roger Zelazny </li>
		       </ul>
           </p>
           
           <p> Quand vous ne regardez rien, pensez à retirer vos lunettes.
           
           <p> 
           		Pourquoi une poule traverse-t-elle toujours la route juste <strong>devant<strong> une voiture ?
		       <br>
		       Pour passer de l'autre côté.
           </p>
 
    </body>
</html>

Erreur 3

"No p element in scope but a p end tag seen." line 14

Les balises <p> et </p> servent à délimiter un paragraphe.

Ici l'erreur est plus difficile à comprendre, la balise </p> de la ligne 14 semble fermer le paragraphe ouvert en ligne 8.

En fait l'erreur vient du fait que la définition du langage html demande qu'un élément liste ne se trouve pas à l'intérieur d'un paragraphe.

Correction (on ferme le paragraphe avant l'ouverture de liste, en ligne 8) :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Corriger du code html </title>
    </head>
    <body>
           <p> Voici une liste de livres : </p>
		       <ul>
				   <li> La Stratégie Ender, Orson Scott Card. </li>
				   <li> Le Hussard sur le toit, Jean Giono.</li>
				   <li> Les Neuf Princes d'Ambre, Roger Zelazny </li>
		       </ul>
           
           
           <p> Quand vous ne regardez rien, pensez à retirer vos lunettes.
           
           <p> 
           		Pourquoi une poule traverse-t-elle toujours la route juste <strong>devant<strong> une voiture ?
		       <br>
		       Pour passer de l'autre côté.
           </p>
 
    </body>
</html>

Erreur 4

" End tag p seen, but there were open elements."

On ferme un paragraphe alors qu'une balise interne à ce paragraphe n'est pas fermée. En effet, il y a une erreur dans la balise fermante </strong> : la barre / a été oubliée.

Correction :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Corriger du code html </title>
    </head>
    <body>
           <p> Voici une liste de livres : </p>
		       <ul>
				   <li> La Stratégie Ender, Orson Scott Card. </li>
				   <li> Le Hussard sur le toit, Jean Giono.</li>
				   <li> Les Neuf Princes d'Ambre, Roger Zelazny </li>
		       </ul>
           
           
           <p> Quand vous ne regardez rien, pensez à retirer vos lunettes.
           
           <p> 
           		Pourquoi une poule traverse-t-elle toujours la route juste <strong>devant</strong> une voiture ?
		       <br>
		       Pour passer de l'autre côté.
           </p>
 
    </body>
</html>

Dernière correction

En l'état, le validator semble curieusement ne plus voir d'erreur : il y en a pourtant encore une puisque le paragraphe ouvert en ligne 16 n'est pas fermé.

Correction :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Corriger du code html </title>
    </head>
    <body>
           <p> Voici une liste de livres : </p>
		       <ul>
				   <li> La Stratégie Ender, Orson Scott Card. </li>
				   <li> Le Hussard sur le toit, Jean Giono.</li>
				   <li> Les Neuf Princes d'Ambre, Roger Zelazny </li>
		       </ul>
           
           
           <p> Quand vous ne regardez rien, pensez à retirer vos lunettes.</p>
           
           <p> 
           		Pourquoi une poule traverse-t-elle toujours la route juste <strong>devant</strong> une voiture ?
		       <br>
		       Pour passer de l'autre côté.
           </p>
 
    </body>
</html>