Les recommandations du Xhtml

Le Xhtml apparait comme un Html beaucoup plus strict. Pour établir cette restriction, le Xhtml complète le Html avec une série de normes fondées sur la syntaxe du Xml. Ces normes fonctionnent sous la forme de recommandations. Dans cet article, vous trouverez les recommandations de base du Xhtml.

1. Obligation de fermer les balises

Alors que le Html était plutôt "laxiste", le Xhtml impose que toute balise ouvrante s'accompagne d'une balise fermante.

Ainsi, un bloc initialisé avec une balise ouvrante <p> devra être fermée en utilisant une balise </p>. La barre oblique "/" (slash) indique que la balise est fermante.

Le code ci-dessous est valide en Html, mais invalide en Xhtml :

<div>
<h1>Bonjour le monde !
<p>Bonne journée.
</div>

Le même code tel qu'il doit être écrit pour répondre à la norme Xhtml :

<div>
<h1>Bonjour le monde !</h1>
<p>Bonne journée.</p>
</div>

Ceci dit, il existe des balises orphelines qui ne possèdent pas de balises fermantes. C'est le cas des balises <meta>, <param>, <img>, <area>, <input>, <br>, <hr>, etc. Dans ce cas, elles doivent se terminer par une barre oblique "/". Ces balises sont donc, à la fois, ouvrantes et fermantes.

Voici, par exemple, comment ces balises peuvent être écrites :

<meta name="robots" content="index, follow" />
<img src="http://domain.com/images/image.jpg" alt="image" />
<input type="submit" value="Envoyer" name="bouton_envoyer" />
<br />
<hr />

2. Obligation d'imbriquer les balises

Les balises doivent s'imbriquer et ne peuvent pas se cheveaucher. Autrement dit, la dernière balise ouverte sera la première à être fermée.

Le code suivant est invalide (les balises se cheveauchent) :

<p>Bonjour, <strong>comment <em>allez</strong>-vous ?</p></em>

Celui-ci est valide :

<p>Bonjour, <strong>comment <em>allez</em></strong>
<em>-vous ?</em></p>

3. Utiliser des minuscules

Les noms des balises et leurs propriétés doivent être écrites en minuscules.

Le code suivant est accepté par la norme Html, mais refusé en Xhtml :

<A HREF="http://domain.com" TITLE="Cliquez ici">Aller là !</A>
<INPUT TYPE="submit" VALUE="Envoyer" />

La norme Xhtml impose d'écrire :

<a href="http://domain.com" title="Cliquez ici">Aller là !</a>
<input type="submit" value="Envoyer" />

Vous constatez que dans l'exemple ci-dessus, les valeurs des propriétés title et value contiennent une majuscule ("Cliquez ici" et "Envoyer"). Il ne s'agit pas d'une erreur. En fait, la présente recommandation ne s'applique pas au contenu des valeurs, mais uniquement au nom des balises, de leurs propriétés et attributs.

4. Spécifier la valeur

Les propriétés ou attributs doivent avoir une valeur. Autrement dit, chaque propriété doit être suivie d'un signe "=" et d'une valeur.

La meilleure manière d'illustrer cette recommandation, est de nous arrêter sur la balise <select>. Rappelons que cette balise peut être intégrée dans un formulaire et qu'elle a pour fonction de proposer une liste de choix (avec des éléments invariables). L'utilisateur étant invité à choisir l'un des éléments de cette liste. Les éléments de cette liste sont appelés <option>.

Observons comment encoder cette balise (ou plutôt ce groupe de balises) selon la norme Html :

<select>
<option value="1" selected >Un</option>
<option value="2" >Deux</option>
<option value="3" >Trois</option>
</select>

Comme nous pouvons le constater, l'une des balises <option> possède un attribut selected qui n'a pas de valeur. Cette manière d'écrire est conforme aux normes du Html.

Précisons que la fonction de la propriété selected est de déterminer la balise <option> qui sera sélectionnée par défaut. Si plusieurs balises <option> d'une même liste de choix possèdent l'attribut selected, alors c'est la dernière de ces options qui sera sélectionnée par défaut.

Quant à l'application des recommandations du Xhtml à la propriété selected elle se heurte au fait qu'aucune valeur spécifique n'a été prévue pour elle. En effet, la valeur de cet attribut se résume à sa présence ou à son absence dans la balise <option>.

Dés lors, pour résoudre ce problème, le Xhtml impose que le nom de cet attribut devienne sa propre valeur. Autrement dit, la balise selected est égale à elle-même (selected="selected").

Voici donc la manière "recommandée" d'implémenter cette balise :

<select>
<option value="1" selected="selected" >Un</option>
<option value="2" >Deux</option>
<option value="3" >Trois</option>
</select>

Ce problème se pose également avec l'attribut checked (checked="checked") qui peut être précisé dans le cadre de la balise <input> pour les types radio ou checkbox.

5. Entourer les valeurs de guillemets

Non seulement les propriétés doivent avoir une valeur, mais de plus ces valeurs doivent être encadrées de guillemets.

Ce code sans guillemets est invalide :

<input type=submit value=Envoyer />

Par contre, celui-ci est valide :

<input type="submit" value="Envoyer" />

6. Préciser le standard utilisé

Le standard utilisé pour le code de la page doit être précisé. Pour cela, il faut que la page débute par une balise DOCTYPE.

Voici trois déclaration DOCTYPE qui correspondent aux trois types de spécifications Xhtml 1.0 ("strict", "transitional" et "frameset") :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

En fonction du type de spécification que vous choisissez, vous devez insérer l'une ou l'autre de ces balises DOCTYPE avant la balise <html>.

Enfin, voici le DOCTYPE de la norme Xhtml 1.1 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

La norme Xhtml 1.1 est uniquement stricte.

Un dernier conseil

Les recommandations Xhtml ne constituant pas un ensemble de "règles" au sens strict, personne ne vous impose de les respecter. Vous pouvez vous contenter de la norme Html qui est beaucoup plus souple. Dans ce cas, n'oubliez pas de spécifier un DOCTYPE indiquand au navigateur client que votre page est codée en Html.

Seulement, en respectant les spécifications Xhtml vous normalisez la manière dont votre page sera affichée par le navigateur du client. C'est un avantage qu'il ne faut pas négliger.

Et puis, soyons honnête, les recommandations Xhtml ne sont pas terribles. Donc, ne serait-il pas plus facile de s'habituez, dès vos premières pages, à écrire selon les normes Xhtml ?

Enfin, les personnes qui souhaitent savoir si leur site répond aux recommandations du Xhtml, peuvent soumettre leurs pages au site W3C Validation.