Le terme xhtml revient souvent quand on parle de développement et de standards du web. Le xhtml se définie comme une évolution du html compatible avec le langage xml.

Je ne vais pas décrire ici la structure du html qui est bien connu mais plutôt les différences entre les deux langages et les nouvelles règles à respecter afin d'obtenir du code dit "xhtml valide". Le langage xhtml 1.0 est une évolution du html 4.0 puisqu'il garde les mêmes balises, attributs et règles d'imbrications. C'est dans des détails de syntaxe permettant une comptabilité avec (et imposé par) XML que réside la différence entre les deux structures.

Les pages web peuvent être interprétées différemment par le navigateur suivant l'extension du fichier. Le navigateur utilisera un analyseur syntaxique html pour les fichiers .htm ou .html et un analyseur syntaxique XML pour les fichiers enregistrés en .xhtml. Seule différence, la structure des fichiers .xhtml devra être exempt de fautes de syntaxe alors que le contenu des fichiers .htm ou .html sera quand même affiché.
Dans ce cas là il faut savoir que le résultat pourra différer suivant les navigateurs utilisés et le temps de chargement de la page se verra peut être rallongé...

Déclaration XML et DTD
Le DTD (Document Type Definition) s'écrit en haut du fichier, il décrit le modèle de document utilisé.
Il existe plusieurs types de documents:
- html 4.01 (transitionnel, strict et frameset)
- xhtml 1.0 (transitionnel, strict et frameset)

Le mode transitionnal permet le passage d'une page html au xhtml, il n'impose pas la séparation du contenu et de la présentation (transition simplifiée entre les deux langages)
Le mode strict impose un respect de la structure définie dans le DTD et surtout une séparation forme/contenu et donc l'utilisation des feuilles de styles (CSS).
Le mode frameset doit être défini uniquement pour les sites utilisant les frames.
Il est donc conseillé d'utiliser directement le mode strict dans sa déclaration pour produire du code propre dés le début.

Exemple de déclaration html 4.01 strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">

Exemple de déclaration xhtml 1.0 strict, il y a également une déclaration xml qui doit être faite au tout début d'un fichier, elle permet d'affirmer que la structure qui suit est conforme au xml.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

En xhtml, la balise ouvrante html doit aussi renseigner un attribut xmlns="" (espace de nommage)
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- contenu du fichier -->
</html>

Syntaxe et règles de construction en xhtml
xhtml ressemble beaucoup à la syntaxe du html puisqu'il retire certaines balises mais ne lui en ajoute aucune. La différence essentiel réside dans la rigidité de la syntaxe puisqu'il faudra respecter un ordre d'imbrication(la cohérence des encadrement est obligatoire, il est interdit d'écrire <i><b>texte</i></b> !), respecter la casse en écrivant les balises en minuscule (html ne fait pas la différence entre majuscules et minuscules) et ne pas inclure d'attributs de présentation dans les balises puisque ceux-ci doivent être séparés.

Les balises vides doivent se fermer, écrire <br/> et non <br> ou encore écrire <a href="" title=""/> lien </a> au lieu de <a href="" title="">lien</a>
Certains attributs doivent obligatoirement être mis entre guillements à l'intérieur de leur balise, écrire <td nowrap="nowrap">texte</td> et non <td nowrap>texte</td>

- a ne peut pas contenir d'autres éléments a
- pre ne peut pas contenir les éléments img, object, big, small, sub, ou sup
- button ne peut pas contenir les éléments input, select, textarea, label, button, form, fieldset, iframe, ou isindex
- label ne peut pas contenir d'autres éléments label
- form ne peut pas contenir d'autres éléments form


Voila en gros tout ce qu'il fallait dire pour pouvoir commencer à développer un site aux normes xhtml sans trop de difficultés. Les sources notées ci-dessous approfondissent certains points.

Il restera à valider ses connaissances xhtml (quiz1, quiz2, quiz3) pour être au top :-)

Sources utilisées pour écrire ce billet:
open web
xhtml.css.free.fr
selfhtml.org
alsacréations
allhtml