Accueil    HTML    Du HTML vers le XHTML
 



  Du HTML vers le XHTML

Index des balises html


Le HTML utilisé jusqu'à présent pour le développement des applications web devient moins approprié pour servir de base aux développements qui se profilent, basés sur la structure de plus en plus présente du XML.

Le XHTML (eXtensible HyperText Markup Language) marque une transition entre les développements actuels et à venir. Il représente une reformulation du HTML 4 vers un langage XML plus portable et syntaxiquement plus rigoureux.

Le XHTML 1.0 supporte l'ensemble des balises du HTML 4, bien que certaines seront abandonnées dans les futures versions du XHTML. Afin de maintenir une correspondance entre HTML et XHTML, les trois DTD (Document Type Definition) correspondant au HTML 4 (Strict, Transitional, Frameset) sont utilisables pour le XHTML.

Le XHTML répond à une exigence de mise en forme des documents HTML. La mise en place de ce nouveau standard a pour but de rendre compatible les documents de type HTML avec la norme d'écriture des documents XML.

Les principales différences entre HTML et XHTML sont syntaxiques. Si vous maîtrisez le HTML, le XHTML ne représente qu'une suite de bonnes pratiques à appliquer lorsque vous créez vos pages.

Les règles à appliquer pour valider du XHTML sont :

- La fermeture de toutes les balises
- Ne pas laisser de balises se chevaucher
- Ecrire en minuscule le nom des balises et des attributs
- Ne pas laisser d'attributs présents sans valeur associée
- Encadrer les valeurs appliquées aux attributs par des guillemets
- Spécifier le standard utilisé pour l'écriture de la page : balise DOCTYPE
- Ne plus utiliser les balises et les attributs obsolètes


 Fermeture des balises :

Fermer une balise correspond à écrire le tag de fermeture approprié à cette balise. Certaines balises nécessite déjà ce tag de fermeture (<a ...> ... </a> par exemple). Cependant un certain nombre de balises ne nécessite pas de tag de fermeture (area, br, col, frame, img ...)

Ainsi lorsque vous voulez écrire un retour à la ligne, vous devez fermer la balise : <br> devient <br />. Cette syntaxe ("... />") vient de l'écriture XML de fermeture d'un élément sans élément fils.


 Chevauchement des balises :

Cette nécessité vient à nouveau d'une cohérence syntaxique avec le XML. L'imbrication des tags doit être respectée : l'ordre de fermeture des tags doit s'effectuer dans l'ordre inverse de celui d'ouverture. En d'autres termes, le dernier tag ouvert doit être le premier fermé.

Exemples :
   <b><i>mauvaise écriture des tags</b></i>
   <i><b>écriture correcte des tags</b></i>
   <b><i>écriture correcte des tags</i></b>


 Ecriture des balises et attributs en minuscules :

Il n'est plus possible en XHTML d'écrire par exemple : <INPUT TYPE="hidden" name="test" />.
Il faut écrire les mots "input" et "type" en minuscule et toujours penser à bien écrire la fermeture de la balise:
<input type="hidden" name="test" />


 Spécifier la valeur de chaque attribut :

Certaines des balises HTML possèdent des attributs sans valeurs. La balise <td> utilise par exemple l'attribut "nowrap" qui empêche les retours à la ligne dans la cellule. Les attributs "checked" ou "disabled" ne prennent pas non plus de valeur.

Pour répondre à cette norme il faut donner la valeur correspondant au nom de l'attribut. Une zone de texte non éditable s'écrira alors :
<input type="text" disabled="disabled" value="Texte définitif" />

Toute valeur associée à un attribut doit être encadrée par des guillemets pour être valable. Il n'est donc pas possible d'écrire explicitement des guillemets dans la valeur d'un attribut. Pour contourner ce problème il suffit d'écrire le code HTML associé (Tableau des caractères HTML, " → &quot;).


 Utiliser la balise <!DOCTYPE ... > :

La balise doctype définie le type de standard employé pour le balisage de la page. Trois variantes existent :
   - DTD Strict
   - DTD Transitionnal
   - DTD Frameset

Comme vu dans les principes du xhtml, il est impératif de respecter l'imbrication des balises, l'écriture des éléments et attributs en minuscules, l'écriture entre côtes des valeurs des attributs (obligatoires), la fermeture des balises et une bonne mise en forme du document.

 Un document XHTML doit comporter une structure minimale :

La déclaration du Doctype est obligatoire et doit être la première ligne du document. Les éléments <html>, <head> et <body> sont également obligatoires ainsi que la balise <title> au sein de l'élément <head>.
La structure minimale d'un document xhtml est donc la suivante :


<!DOCTYPE ... Type de doctype ... >
<html>
<head>
   <title>... Titre de la page ...</title>
</head>
<body>

   ... Corps du document ...

</body>
</html>


 La fermeture des balises est obligatoire :

Soit par une balise fermante : <balise>...</balise>, soit avec la syntaxe " ... />".
Les balises n'ayant pas de tag de fermeture obligatoire sont les suivantes, elles s'écrivent :

<area ... />
<base ... />
<basefont ... />
<br />
<col ... />
<dd> ... </dd>
<dt> ... </dt>
<frame ... />
<hr ... />
<img ... />
<input ... />
<li> ... </li>
<link ... />
<meta ... />
<option> ... </option>
<param ... />


 Les attributs doivent tous être renseignés :

Par exemple la syntaxe d'une textbox non modifiable est en HTML :
<input type="text" disabled>.
Cette syntaxe est incorrecte en XHTML (valeur associée à l'attribut disabled et fermeture correcte du tag), son écriture correcte est :
<input type="text" disabled="disabled" />


Les attributs suivant ne nécessite pas de valeur obligatoire en HTML. Pour qu'ils soient bien interprétés en XHTML il est nécessaire en XHTML de leur donner comme valeur leur propre nom :

compact → compact="compact"
checked → checked="checked"
declare → declare="declare"
readonly → readonly="readonly"
disabled → disabled="disabled"
selected → selected="selected"
defer → defer="defer"
ismap → ismap="ismap"
nohref → nohref="nohref"
noshade → noshade="noshade"
nowrap → nowrap="nowrap"
multiple → multiple="multiple"
noresize → noresize="noresize"

Pour convertir un site et le rendre valide en XHTML, il faut donc procéder aux étapes suivantes :

 Ajout de la définition d'un DOCTYPE :

Le choix peut se faire entre STRICT, TRANSITIONAL ou FRAMESET. Dans le cadre d'un site n'ayant pas de Frameset, le choix se porte vers la DTD Transitional qui est plus souple que la DTD Strict et mieux adaptée à l'évolution d'un site vers le XHTML.
La déclaration de ce doctype se fait alors en début de chaque page comme ceci :


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


 Réécriture des tags et attributs en minuscules :

Il faut reprendre tous les tags html (y compris les éléments html head title et body) et les réécrire en minuscule.

 Mise entre double quotes des valeurs associées aux attributs

Il faut vérifier que toutes les valeurs associées aux attributs ont bien été encadrées par des double quotes. Il faut également renseigner les attributs ne nécessitant pas de valeur (checked, disabled ...).

 Fermeture de tous les tags

Les balises hr br ou img doivent toutes être fermées avec la syntaxe " />" (par exemple :
). La liste complète des tags n'ayant pas de fermeture obligatoire est listée dans la partie Syntaxe de cet article.

 Ecriture de l'attribut alt pour toutes les images :

L'attribut alt est obligatoire dans la balise <img ... /> en xhtml. Il affiche une infobulle lors du survol de l'image (sauf si sa valeur est vide) et est affiché lorsque l'image n'est pas trouvée ou n'a pas pu être chargée.

 Vérifier l'implémentation de vos scripts :

Le javascript est censé être implémenté avec la section CDATA de la façon suivante (en raison des caractères spéciaux <, >, [, ], &) :


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


Ecriture de javascript au sein d'une page :

<script type="text/javascript">
//<![CDATA[

...code javascript...

//]]>
</script>


 Vérifier la validité de vos pages :

Le W3C met à votre disposition des outils pour vérifier la validité de vos pages. Vous pouvez soit inclure une référence dans chaque page de votre site qui une fois cliquée ouvrira une fenêtre vers le moteur de validation du W3C, soit allez sur le site du W3C et entrer manuellement l'adresse de vos pages pour les tester.
Lien vers le moteur de validation du W3C : http://validator.w3.org