Il est temps de passer au XHTML 1.0 - Introduction au Extensible Hypertext Markup Language

Consulté 17,428 fois

Il est temps de passer au XHTML 1.0 - Introduction au Extensible Hypertext Markup Language

Django (Oznog) Blais, Trucsweb (11 avril 2001)

· Niveau : INTERMÉDIAIRE
· Compatibilité : Navigateur 4 +

Le XHTML 1.0 est la dernière recommandation du W3C, ce nouveau standard défini le 26 janvier 2000 par le World Wide Web Consortium est avant tout une façon de présenter un document XML tous en gardant le HTML conventionnel. Donc transitoire entre le HTML 4.01 et le XML 1.0. Grande surprise, il n’y aura pas de HTML 5.0! La différence est avant tout le « DOCTYPE » ou le DTD « Document Type Definition » qui permet de définir le HTML contenu dans votre document XML, exactement comme un document XSL. Convertir vos pages HTML 4.01 en XHTML 1.0 n’entraîne aucun problème de compatibilité notable avec les navigateurs actuel, et il convient bien sûr à tous dans la mesure ou vos pages seront conforme aux prochaines recommandations. Le XHTML est selon moi la meilleure façon de suivre efficacement le développement des standards Web sans trop souffrir le martyre.

Si vous étiez comme moi un programmeur d’expérience avant de voir un code HTML, votre réaction n’a t’elle pas été de vous demander " mais qu’est-ce que c’est que ce langage ! ". La première chose qui frappe c’est qu’un navigateur ignore tout simplement ce qu’il ne reconnaît pas. Il peut même estimer et réagir, en fonction de différente situation. Chose inhabituelle pour les programmeurs et quel mauvais pli à prendre pour les nouveaux. Le poids des navigateurs est le prix à payer pour cette technologie, 20Mo, 30Mo… Le XHTML palis à cette lacune en instaurant des règles de programmation beaucoup plus stricte.

Imaginez un secrétaire donnant un document que le patron doit corriger avant d’autoriser ! Cette nouvelle recommandation nous ramène à la base. Le principe est simple, plus strict, il faut dire ce qu’il y a à dire dans l’art et dans l’ordre des choses. Plusieurs règles à suivre mais un code remmené à sa plus simple expression.

Le secret c’est le fichier DTD. Je ne m’éterniserai pas sur ce fichier car le W3C recommande fortement d’utiliser les DTDs installés sur leur propre serveur. Vous n’avez donc qu’une référence à ajouter sans même connaître le contenu de ce fichier. Mais c’est toujours pratique, question d’avoir un coup d’œil d’ensemble sur les balises et attributs disponibles!

Le type de document ou le DTD " Document Type Definition " est un fichier qui contient une collection de déclaration XML, les " namespaces " qui définissent la structure, les éléments et les attributs utilisés dans le document. Un " namespaces " ou " espace de nom ", identifie une balise décrivant un objet particulier. Voici un exemple d’un document DTD transitionnel, il s’agit du " namespaces " de la balise <body> :

<!ELEMENT body %Flow;>
<!ATTLIST body
  %attrs;
  onload      %Script;     #IMPLIED
  onunload    %Script;     #IMPLIED
  background  %URI;        #IMPLIED
  bgcolor     %Color;      #IMPLIED
  text        %Color;      #IMPLIED
  link        %Color;      #IMPLIED
  vlink       %Color;      #IMPLIED
  alink       %Color;      #IMPLIED
>

Il y a trois fichiers DTD, pour l’instant :

Strict : Toutes les balises doivent être définies dans un " namespaces " du DTD. Fait à noter, plusieurs balises HTML 4.01 ne sont plus reconnues, comme <center> par exemple.
XHTML-1.0-Strict : http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional : La grande majorité des balises HTML 4.01 sont disponibles et vous pouvez utiliser des balises qui ne sont pas définit dans le DTD.
XHTML-1.0-Transitional : http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset : Parce que c’est une méta structure, le W3C à décidé de retirer ce format du standard XHTML et d’en faire une déclaration propre aux pages avec cadre " frameset "
XHTML-1.0-Frameset : http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Voilà pour l’identification de votre document. Maintenant il faut que son contenu respecte les règles. Les règles qui vont faire en sorte que votre code HTML respecte les nouvelles normes. Le navigateur ne s’en portera que mieux et le programmeur rassuré ;-0.

1. Vous devez utiliser les balises du HTML 4.01. Pour plus d’information sur les spécifications, les balises et les arguments du HTML 4.01, voir : "Index of Elements" et "Index of Attributes".

2. Le XML étant sensible aux majuscules/minuscules, toutes les balises du XHTML doivent être en minuscule.

3. Toujours pour respecter les normes du XML, toutes les balises doivent être fermées <li>...</li>, <td>...</td> etc.. Remarquer que les balises qui n’affectent pas un bloc, comme un saut de ligne ou une images, doivent aussi être fermées directement dans son ouverture.

Mauvais
<p>bonjour
<p>le monde...
Bon
<p>Bonjour</p>
<p>le monde...</p>

Mauvais
Bonjour<br>
Le monde...<br>
Bon
Bonjour<br />
le monde<br />

Mauvais
<img src="logo.png" alt="logo">
Bon
<img src="logo.png" alt="logo" />

L’utilisation d’une seconde balise doit être la norme : <br></br> mais les navigateurs pourraient être confus, c’est pourquoi <br /> est conseillé. Pour les balises méta c’est la même chose:

4. Les images doivent avoir un texte alternatif. Même les tables ou tableaux doivent avec un texte, le summary.

Mauvais
<table width="100%" border="0">
<tr><td>
<img src="logo.png" />
</td></tr>
</table>

Bon
<table width="100%" border="0" summary="Mon logo">
<tr><td>
<img src="logo.png" alt="logo" />
</td></tr>
</table>

5. Tous les attributs doivent avoir un argument et être entre guillemets.

Mauvais
<img src=logo.png alt="">
Bon
<img src="logo.png" alt="logo" />

Un attribut qui n’a pas d’expression ou une constante:

Mauvais
<option name="nom" selected>
Bon
<option name="nom" selected="selected">

Mauvais
<textarea name="text" rows="10" cols="50" readonly>
Bon
<textarea name="text" rows="10" cols="50" readonly="readonly">

6. La structure ne permet plus les imbrications illogiques comme :

<b><i>a test</b></i>

mais plutôt
<b><i>Texte</i></b>

7. L’ordre est aussi important, ainsi une balise méta ne peut se retrouver à l’intérieur du " body ". Un en-tête H2 ne peut être à l’intérieur d’une H1 ou même Un H1 ne peut être après un H2.

8. En terminant, il faut prendre l’habitude d’indiquer l’attribut " ID " déjà utilisé par le DHTML. Par exemple, cette balise pour indiquer l’ancre d’un hyperlien dans une même page. Noter que cette balise ne peut plus se retrouver dans le vide en haut d’une page par exemple, elle doit être dans un bloc, un paragraphe ou une table etc.

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

9. Les scripts
Attention au script. Les éléments de script et de style sont déclarés comment ayant des contenus #PCDATA. En conséquence, les symboles " < " et " & " seront interprétés comme s’ils étaient le premier caractère d’une balise, l’ouverture d’une balise quoi, et des items comme " < " et " & " seront reconnus en tant que références par le processeur XML aux symboles " < " et " & " respectivement. En créant une section recouvrant ces éléments de script ou de style qui soit une section marquée CDATA, évite l’interprétation de ces éléments.