Le XHTML

Le xHTML est une extention de l'html recommandé par le W3C. C'est un language hybrid, croisement entre l'html et le XML.
Le standart est le XHTML 1.0 Trasitional. Cette version permet d'obtenir du code reconnu par les ancien comme les nouveau naviguateur.

Quelques rêgles

Convertir de l'html en xHTML n'est pas sorcié. il suffit d'être rigoureux et d'observé certaine rêgle.

le DOCTYPE, et le NameSpace

La 1ere chose est de fournir le bon doctype à la page.
Le xHTML doit absolument commencer par ce doctype.

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

Cette déclaration doit être en toute 1ere ligne de la page, avant tout autre chose.

Vous trouverez la liste des doctype recommandés par le W3C ici : http://www.w3.org/QA/2002/04/valid-dtd-list.html

le DOCTYPE doit etre directement suivit du namespace :

html4strict
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

S'ensuit le type d'encodage. Pour un site international, qui pourrait contenir des caractere non ascii, l'utf8 est tres bien :

html4strict
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

Ecrire tout les TAG en miniscule

A la diférence de l'html, le xml est sensible à la casse. Le seul moyen d'obtenir des pages valides en xhtml est de tapper tout les tag en minuscule. Par exemple, en html vous auriez :

html4strict
    <TITLE>Wikistuce</TITLE>

Pour le xhtml il faut :

html4strict
    <title>Wikistuce</title>

Donc <P> devient <p>, <DIV> devient <div>, <BODY> deviens <body>, etc….

Les guilletmets et les attributs

En html on pouvais écrire un attribut sans guillemet exemple :

html4strict
height=55

en xhtml, c'est interdit, il faut absolument écrire :

html4strict
height="55"

Fermer tous les TAG

En html, vous pouviez utiliser les tag ouvrant sans les fermer. exemple :

html4strict
<p>mon paragraphe.

en Xhtml, il faut absolument tout fermer :

html4strict
<p>mon paragraphe.</p>

Fermer aussi les TAG vide

Certain tag, comme le <br>, <hr>, <img> en html ne nécésite rien d'autre.
Tout est passé en attribut.
En html, l'ecriture ci dessus est valide mais en xhtml, ces TAG doivent etre fermé.
Pour cela, on rajoute juste un slash ('/') avant le '>' de fermeture exemple :

html4strict
<br />
<img src="plop.png" alt="image" />

!!Note : !! Juste avant le /> il y a un espace, cela permet la compatibilité avec les anciens naviguateurs.
!!Important : !! L' attribut alt de l'objet <img> est OBLIGATOIRE pour obtenir un code valide. Vous pouvez aussi rajouter un attribut title qui ne serait que mieux :

html4strict
<img src="plop.png" alt="mon plop" title="Le plop qui tue en action" />

Comment écrire du HTML valide W3C dans un script?

Une des erreurs les plus commune détecter par le W3C apparait lorsque vous écrivez du HTML à partir d'un script. En effet les tag doivent être fermés comme ceci <\/span> pour être validés par le W3C.

Voici un exemple de ce qu'il ne faut pas faire:

javascript
<script type="text/javascript">
<!--
  // Ceci est une erreur !
  document.write("</p>");
// -->
</script>

Voici maintenant ce qu'il faut écrire:

javascript
<script type="text/javascript">
<!--
  document.write("<\/p>");
// -->
</script>

Validation

Pour etre sur de faire du Xhtml valide, n'hésitez pas a vous rendre sur http://validator.w3.org/ pour valider votre code source !

Credit

Ceci est une traduction du NYPL online style guide

Pour aller plus loin

Retrouver sur ce site anglais (http://www.nypl.org/styleguide/xhtml/index.html) beaucoup d'info sur le Xhtml, nottement, comment configurer dreamweaver pour faire du xhtml.