Accueil > Cours Web > Sites web statiques > Normes et standards

Les règles du XHTML

samedi 10 janvier 2004 par André Vincent

Voici les règles particulières du XHTML qui le distingue du HTML.

Voir aussi : Passer du HTML au XHTML

1. Ouvrir avec un DOCTYPE et un espace de nommage (namespace).

Une des particularités des langages de la famille du XML est de pouvoir définir ses propres balises par l’intermédiaire d’un DTD (Document Type Declaration). La référence à un DTD est indispensable car il contient la liste et la définition des balises utilisées dans le document.

Il y a pour l’instant [début 2004], un seul type de document XHTML 1.1 et 3 types de document XHTML 1.0 :

Strict
Transitional
Frameset

Tout document document XHTML devra donc commencer avec une balise qui indique à l’agent utilisateur (le logiciel de navigation) comment interpréter les autres balises du document. Voici un exemple de déclaration de DOCTYPE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Voir d’autres type de DTDs : La déclaration du type de document

La déclaration du type de document XHTML 1.0 doit être suivie par la déclaration de l’espace de nommage suivant, inséré dans l’élément html :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

Pour le XHTML 1.1, on utilisera plutôt la déclaration suivante :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

Le DTD se place au début de tout document XHTML. La déclaration du DOCTYPE peut parfois être précédée du prologue XML inséré en tout début du document :

<?xml version="1.0" encoding="iso-8859-1"?>

Ce prologue XML est toutefois optionnel et même déconseillé pour l’instant, car un bug de IE-6/Win le fait basculer en mode Quirk, en plus d’entraîner certains autres problèmes dans des navigateurs plus anciens.

Un des rôles du prologue XML est de spécifier le type d’encodage des caractères qui est utilisé à l’intérieur du document. C’est l’encodage qui est spécifié lors de l’enregistrement du document.

Si le prologue est omis, on peut tout aussi bien spécifier le type d’encodage en utilisant, à cet effet, un élément meta :

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

ou, pour pour un document utilisant des caractères autres qu’occidentaux :

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

2. Le document DOIT comporter au minimum les éléments de structure html, head et body.

De plus, l’élément de titre title DOIT être présent dans l’élément head.

Le XML est très rigoureux quant à la structure du document. La structure de base d’un document XHTML est :

<!DOCTYPE ...>

<html ... >

  <head>

  ... 

    <title> ... </title>

  ...

  </head>

  <body> 

    ... 

  </body>

</html>

3. Écrire les balises en bas de case (minuscules)

XML étant sensible aux majuscules/minuscules (case sensitive], toutes les balises du XHTML doivent être écrites en minuscules, tant pour les éléments que les attributs ; par contre, les valeurs, elles ne sont pas obligatoirement assujetties à cette règle.

XHTML	HTML
`<p>Bonjour</p>`	`<P>Bonjour</P>`
`<title>Le titre</title>`	`<TITLE>Le titre</TITLE>`

4. La valeur des attributs doit toujours être écrites entre des guillemets (et ce même pour des valeurs numériques).

XHTML	HTML
`<table colspan="4">`	`<table colspan=4>`
`<a href="test.HTM">Test</a>`	`<A HREF=test.HTM>Test</A>`

5. Les balises d’images IMG doivent TOUJOURS comporter l’attribut alt pour le texte alternatif.

XHTML	HTML
`<img src="image.gif" alt="Mon image" />`	`<img src="image.gif">`

6. A toute balise d’ouverture doit correspondre une balise de fermeture.

Fini les balises <p> et <li> orphelines…

XHTML	HTML
`<p>Bonjour</p> <ul> <li>1</li> <li>2</li> </ul>`	`<p>Bonjour <ul> <li>1 <li>2 </ul>`

7. Les balises uniques doivent également être refermées.

XHTML	HTML
`<br /> <hr /> <img src=xxx.gif alt="image" />`	`<br> <hr> <img src=xxx.gif alt="image">`

L’utilisation d’une seconde balise fermante n’est pas en théorie erronée soit par exemple <br></br> mais les navigateurs des anciennes générations pourraient ne pas l’interpréter correctement, c’est pourquoi <br /> [avec un espace avant la barre oblique /] est conseillé. Il en est de même pour les balises input hr meta et link :

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" href="styles.css" type="text/css" />

…

8. Les balises doivent être correctement imbriquées.

XHTML	HTML
`<b><i>gras et italique</i></b>`	`<b><i>gras et italique</b></i>`

La règle générale est la suivante :
la dernière balise ouverte doit être la première refermée .

9. On ne doit pas utiliser de notations compactes ou raccourcies dans les attributs.

XHTML	HTML
`<hr noshade="noshade" /> <input checked="checked"> <option selected="selected"> <frame noresize="noresize">`	`<hr noshade> <input checked> <option selected> <frame noresize>`

Voir la liste complète des notations compactes ou raccourcies

10. On utilisera l’attribut ID plutôt que l’attribut NAME pour identifier un élément comme A, APPLET, FRAME, IFRAME, IMG, et MAP.

XHTML	HTML
`<a id="haut">Ancre</a>`	`<a name="haut">Ancre</a>`

Toutefois, on notera que pour garder une compatibilité avec les navigateurs des générations précédentes, on peut garder à la fois name et id avec les mêmes attributs comme ceci

<a id="haut" name="haut">Ancre</a>

Mais cette méthode n’est valide que dans un document utilisant un DTD XHTML 1.0 « Transitional ».