TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

Passer du HTML au XHTML

Balise fermante obligatoire

Contrairement au HTML quelque peu laxiste sur la structure des documents XHTML est parfaitement strict quant aux règles de structuration. Ainsi en XHTML, à toute balise ouvrante, doit correspondre une balise fermante.

<p> cet exemple bien qu'acceptable en HTML n'est pas valide en XHTML
<p> En XHTML à chaque balise ouvrante doit toujours correspondre une balise fermante </p>

Fermeture des balises vides

Les balises vides sont également fermée. Ainsi

<img src="logo.gif" alt="logo">
en HTML sera noté
<img src="logo.gif" alt="logo" />
en XHTML. Le "/" final fait office de fermeture pour une balise vide. Ainsi on aura <hr /> ou <br />.
<balise attributs />
est équivalent à
<balise attributs></balise>

Cependant pour des raisons d'interprétation des navigateurs, il est préférable d'utiliser la notation

<balise />
pour une balise vide par nature (img br hr).

Par contre pour une balise ayant normalement un contenu, dans le cas ou ce dernier est absent on utilisera la notation

<balise> </balise>
plutôt que
<balise />
. Ainsi on notera un paragraphe vide
<p> </p>
plutôt que
<p/>
bien que les deux notations soient théoriquement équivalentes.

Imbrication rigoureuse des éléments

La règle suivante doit impérativement être respectée :

toute balise A ouverte avant une une balise B doit être refermée après celle-ci.
Ainsi
<a> .... <b> .... </b> ..... </a>
est correctement imbriqué tandis que
<a> .... <b> .... </a> ..... </b>
ne l'est pas.

Les noms de balises et d'attributs sont en minuscule

Ainsi on écrira
<p class="definition">
et non
<P class="definition">
ou
<p CLASS="definition">

Les valeurs d'attributs sont entre guillemets

<p class=definition> n'est pas valide et doit être remplaçé par <p class="definition">

Pas de formes abrégées d'attributs

Ainsi on n'écrira plus
<td nowrap>
pour empêcher les sauts automatiques de ligne mais
<td nowrap="nowrap">

Les attributs HTML concernés sont les suivants :

compact checked declare readonly disabled selected defer ismap nohref noshade nowrap multiple noresize.

L'attribut "name" est remplaçé par l'attribut "id"

Ainsi pour définir une ancre on utilisera

<a id="repere">
au lieu de
<a name="repere">
. Par soucis de compatibilité avec les anciens navigateurs il est souhaitable de maintenir les deux attributs :
<a id="repere" name="repere">

Les balises <script et <style>

Elles doivent obligatoirement contenir un attribut type

<script type="text/javascript"> ... </script>
ou
<style type="text/css"> ... </style>

Si le script ou la feuille de style contient des caractères spéciaux tels <, > ou & il faut en mettre le contenu dans un section CDATA

<script type="text/javascript">
   <![[CDATA[
      ......Contenu du script .......
   ]]>
</script>

Cependant comme les navigateurs HTML ne reconnaisent pas les sections CDATA il est préférable de définir de tels scripts ou style dans des fichiers externes pour s'assurer d'un compatibilité maximale.

Gestion des caractères spéciaux dans les URLs

Les caractères spéciaux < > ou & figurant dans une URL doivent être remplacé par leurs entités correspondantes soit &lt; &gt; ou &amp;

Ainsi on notera

<a href="page.php?num=3&amp;code=1">Rubriques</a>
en XHTML plutôt que
<a href="page.php?num=3&code=1">Rubriques</a>
en HTML.

L'attribut lang est obligatoirement associé à l'attribut xml:lang

L'attribut "lang" utilisé en HTML est obligatoirement associé à l'attribut "xml:lang" en XHTML. Lorsque la valeurs de ses deux attributs diffèrent c'est la valeur de "xml:lang" qui est prise en compte.

<div lang="fr" xml:lang="fr"> contenu en français </div>
Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007