Un code valide : quelques erreurs fréquentes

16 septembre 2003

par Monique

Les publications de Webmaster Hub
http://www.webmaster-hub.com/publication/Un-code-valide-quelques-erreurs.html

Moins vous ferez d’erreurs en écrivant votre code, plus vous gagnerez de temps au débogage. Voici une liste de quelques pièges faciles à éviter.

Pour toutes les versions

Remarque : Les exemples sont donnés en HTML, si vous utilisez le XHTML n’oubliez pas de fermer toutes les balises

Il est souvent absent ou incorrect : un article est consacré à cet élément essentiel.

Le doctype est sensible à la case, respectez bien l’utilisation des majuscules et minuscules.

Il existe un grand nombre de caractères pour l’ensemble des différentes langues utilisées dans le monde, il est donc important de fournir aux différents navigateurs les informations nécessaires pour interpéter correctement votre texte.

Pour la majorité des sites francophones, vous utiliserez ce charset
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Si le charset est correctement indiqué, il devient inutile d’utiliser les caractères spéciaux dans votre code, celui-ci sera plus facile à relire : athlétisme ou athlétisme

Cas particuliers : les caractères qui font partie du code. Si vous souhaitez qu’ils s’affichent à l’écran, il faut l’indiquer aux navigateurs en utilisant les références d’entités de caractères

< représente le caractère <

> représente le caractère >

" représente le caractère "

La présence du caractère & (ampersand en anglais) dans une URL ou dans un script est source de problème. Il convient donc de le remplacer par &

non valide <a href="foo.cgi?chapter=1&section=2">...</a>

valide <a href="foo.cgi?chapter=1&section=2">...</a>

Vous trouverez des informations complémentaires dans les spécifications du W3C.

L’appel à un script

Non valide <script language="javascript"></script>

Valide <script type="text/javascript">

<!--

  mon script ici

// -->

</script>

Si vous faites simplement appel à des événements tel que onmouseover vous devez le signaler aux navigateurs avec cette balise meta <meta http-equiv="Content-Script-Type" content="text/javascript">

Si vous faites appel à un fichier séparé (pour allèger votre page notamment), le code valide est <script type="text/javascript" src="moncode.js"></script>

Vous trouverez des informations complémentaires dans les spécifications du W3C.

Cet attribut spécifie un texte de remplacement pour les navigateurs qui ne peuvent pas afficher les images, les formulaires ou les applets (navigateurs textes ou vocaux, navigateurs graphiques où l’utilisateur a désactivé cet affichage).

Remarque : Pour une image destinée à la mise en forme, il est recommandé de laisser cet attribut vide, écrivez alt="" et non alt="Puce rouge"

Vous trouverez des informations complémentaires dans les spécifications du W3C.

Les balises doivent être fermées dans l’ordre inverse de leur ouverture

Non valide

Pour les versions en mode strict

Toutes les indications doivent donc être reprises dans une feuille de style, les balises de mise en forme sont obslètes.

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">

<img src="image.gif" border="0" hspace="2" width="460" height="108" alt="description">

L’utilisation correcte des feuilles de style fera l’objet d’un prochain article.

Pour les versions en XHTML

Toutes les balises doivent être fermées !

Non valide <p>paragraphe ou <br> ou <img>

Valide <p>paragraphe</p> ou <br /> ou <img />

Les valeurs d’attribut doivent être entre guillemets.

Non valide <p class=retrait>

Valide <p class="retrait">

Remarque : Des espaces ou des retours chariot dans la définition de l’attribut sont à éviter, interprétés différemment selon les navigateurs, c’est une source d’erreur à l’affichage

Cette liste n’est pas exhaustive... elle peut cependant vous aider à éviter un nombre décourageant d’erreurs lors de la validation de votre code !