Éducation, société et technologie

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.

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".


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 8429 / 1819965

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web statiques  Suivre la vie du site Normes et standards   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 2