Connaître les règles du XHTML

Auteur: Jérôme Forget. Publié le 27 août 2007.

Les règles de syntaxe du XHTML sont pratiquement en tout point semblables à celles du HTML. Cependant, un concepteur de pages Web passant du HTML au XHTML se doit de connaître les règles particulières à la syntaxe du langage XHTML 1.0 Strict.

1. Ouvrir avec le bon DOCTYPE et l'espace de nommage.

   Le document doit respecter les normes de validation d'une des trois DTD XHTML : strict, transitional ou frameset. Une déclaration de type de document doit apparaître dans le document juste avant l'élément html (qui est l'élément racine de tout document XHTML).

   • La DTD stricte n'autorise pas l'utilisation des anciens éléments de présentation (s, u, etc.) mais elle a l'avantage de contraindre le développeur à séparer structure et présentation, avec les facilités de maintenance que cela apporte.
   • La DTD transitionnelle est plus permissive et plus proche des anciennes habitudes liées à HTML 3.2. Les balises dépréciées en XHTML strict y sont autorisées : le recours à cette DTD est donc plus facile dans un premier temps, mais avec le défaut de mêler encore partiellement structure et présentation.
   • Enfin, la DTD frameset permet l'utilisation des cadres. Ceux-ci tombent en désuétude, mais peuvent se réveler encore utiles dans certains cas très exceptionnels.

2. Déclarer le type du contenu avec l'élément META Content.

   Tous les documents XHTML doivent spécifier leur type de contenu et leur encodage de caractères. L'élément meta doit être inséré dans l'en-tête du document XHTML et doit spécifier une valeur à l'attribut http-equiv="content-type".

   <meta http-equiv="content-type" content="text/html; charset=UTF-8">

3. Utiliser des minuscules dans les balises et leurs attributs.

   À la différence du HTML, XHTML est sensible à la casse des caractères et exige que chaque balise soit rédigé en n'utilisant que des minuscules.

   <title>Les industries Transitionnelles<title> <img src="/images/bigmac.jpg" alt="Jérôme dévorant un Big Mac" /> <img src="/images/BIGMAC.JPG" alt="Jérôme dévorant un Big Mac" />

   Si vous utilisez des logiciels d'édition WYSIWYG, faites attention au mélange de caractères majuscules et minuscules, particulièrement lors de la création d'effets de survol sur un élément. Il vous faudra alors changer l'attribut onMouseOver par onmouseover.

4. Placer chaque valeur d'attribut entre guillemets.

   En XHTML, les valeurs d'attributs doivent toujours être saisies entre guillemets.

   <img src="image.gif" width="438" height="30" alt="" />

5. Donner des valeurs à tous les attributs.

   Les attributs doivent toujours avoir une valeur. Ainsi, les attributs de cet exemple en HTML:

   <td nowrap> <input type="checkbox" name="tshirt" value="medium" checked> <hr noshade>

   doivent avoir une valeur. La valeur de l'attribut sera identique au nom de l'attribut:

   <td nowrap="nowrap"> <input type="checkbox" name="tshirt" value="medium" checked="checked"> <hr noshade="noshade">

   Un attribut peut cependant avoir une valeur nulle, comme alt="".

6. Fermer toutes les balises, même les vides.

   En HTML, il est possible d'ouvrir certaines balises sans devoir les fermer, comme <p> ou <li>. Cet exemple est parfaitement valide en HTML, mais est fautif en XHTML:

   <p>C'est du bon HTML mais du mauvais XHTML <p>Je n'ai même pas fermé la balise de paragraphe <p>Et pourtant le navigateur comprend que j'ai voulu la fermer

   En XHTML, toutes les balises doivent être fermées:

   <p>C'est du bon HTML qui valide aussi XHTML</p> <p>J'ai ouvert une balise et je l'ai refermée</p> <p>Je suis vraiment quelqu'un de bien</p>

   Cette pratique - plus rigoureuse que le code lâche du HTML - permet d'assurer qu'aucune erreur de structure ne vienne troubler l'affichage de vos pages. En forçant la fermeture des balises, XHTML vous assure que votre page s'affichera comme elle le doit.

   Vous devez aussi fermer les balises vides, comme <img> ou <br>. Vous n'avez qu'à ajouter une barre oblique à la fin de la balise:

   <br /> <img src="cheval.jpg" />

7. Encoder les caractères <, > et &.

   Les caractères < et > utilisés hors d'une balise doivent être encodés avec &lt; et &gt;. Les perluètes qui ne font pas partie d'une entité doivent être encodés avec &amp;. Ainsi, :

   Belleau & Belleau disent que x > y quand z = 3.

   doit être rédigé comme suit:

   Belleau & Belleau disent que x > y quand z = 3.

   Il en va de même des caractères spéciaux et accentués - dans un encodage ISO-8859-1. Le tableau suivant indique certaines équivalences.

   é	é
   à	à
   ô	ô
   Ö	Ö

• Design Web