Le langage XHTML
L'héritage du XML
HomeDown


Le XML impose à tous ses descendants, dont le XHTML, toute une série de règles quasiment communes car elles appartiennent à la syntaxe propre du XML.


Le XML est un langage strict dont il faut impérativement respecter la syntaxe. Votre document devra être "impeccable" [well-formed] pour éviter tout problème d'affichage.


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

    <html>
    <head> ... </head>
    <body> ... </body>
    </html>

Le document doit comporter les balises html, head et body. En outre, les balises de titre [title] doivent être présentes dans le head.


 
Le XML étant sensible aux majuscules/minuscules [case sensitive], toutes les balises du XHTML seront codées en minuscules.

XHTML

HTML

<p>Bonjour</p>
<img src=xxx.gif alt="image"> 		<P>Bonjour</P>
<IMG SRC=xxx.gif alt="image">

Pas bien compliqué mais peut-être un peu déroutant pour ceux qui avaient pris l'habitude de mettre les balises en majuscules pour la lisibilité du code source.


 
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>


 
Les balises uniques doivent également comporter un slach / de fin.

XHTML

HTML

<br />
<img src=xxx.gif alt="image" /> 		<br>
<img src=xxx.gif alt="image">

L'utilisation d'une seconde balise n'est pas en théorie erronée soit par exemple <br></br> mais les navigateurs des anciennes génération pourraient ne pas l'interpréter correctement, c'est pourquoi <br /> [avec un espace avant le /] est conseillé. Il en est de même pour les balises meta : <meta name="http-equiv" content="pragma:no-cache" />..


 
Les balises doivent être correctement imbriquées.

XHTML

HTML

<b><i>gras et italique</i></b> <b><i>gras et italique</b></i>


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

XHTML

HTML

<table width="100%"> <table width=100%>


 
On évitera aussi les notations compactes ou raccourcies dans les attributs.

XHTML

HTML

<input checked="checked">
<option selected="selected">
<frame noresize="noresize"> 		<input checked>
<option selected>
<frame noresize>

Pour les amateurs, en voici la liste complète.


 
Les balises images doivent comporter l'attribut alt pour le texte alternatif.

XHTML

HTML

<img src="xxx.gif" alt="Mon image" /> <img src="xxx.gif">


 
On utilisera l'attribut id (déjà souvent utilisé en Dhtml) plutôt que l'attribut name pour identifier un élément comme a, applet, frame, iframe, img, and map.

XHTML

HTML

<img src="picture.gif" id="image1" /> <img src="picture.gif" name="image1">

On notera que pour garder une compatibilité avec les navigateurs des générations précédentes, il est conseillé de garder à la fois name et id avec les mêmes attributs comme ceci <img src="picture.gif" id="image1" name="image1" />.


 
Précautions pour les scripts et feuilles de style.

Le problème provient du fait que le langage de script contient des caractères qui n'ont pas la même signification en XHTML. Ainsi le signe < signifie plus petit que en Javascript et est le caractère d'ouverture d'une balise en Html. De même & est un opérateur booléen en Javascript et le début d'un caractère spécial en XHTML.

La solution consiste à "encapsuler" les éléments de script ou de style dans une section marquée CDATA, afin d'éviter tout problème d'interprétation de ces éléments par le processeur XML.

    <script language="JavaScript type="text/javascript">
    <![CDATA[
    document.write("<b>Bonjour le monde !</b>");
    ]]>
    </script>

On conseille vivement dans la littérature d'utiliser les éléments de scripts ou de style dans un fichier externe car <![CDATA[ ... ]]> n'est pas encore reconnu par des navigateurs comme Internet Explorer ou Netscape. Soit,

    <script language="Javascript" type="text/javascript" src="script.js">
    </script>

    où script.js contiendrait :
    document.write("<b>Bonjour le monde !</b>");

Pour terminer, il faut souligner que si votre script ne contient aucun de ces caractères prêtant à confusion comme < >, [, ], or & votre script sera valable. Mais dès que vous ajouterez un de ces caractères votre code XHTML ne sera alors plus valide.


 
Le XHTML use et abuse [?...] de l'attribut "lang". On définira la langue utilisée par le document dans la balise de début de document XHTML. Ce qui n'empêchera pas de mettre en exergue les bouts de document qui utilisent une autre langue que celle définie au départ par l'attribut xml:lang de la façon suivante <div lang="en" xml:lang="en">To be or not to be</div>.