13 règles pour passer de HTML à XHTML
Depuis janvier 2000, le XHTML est
le langage préconisé par le W3C pour
la conception des pages Web. XHTML est le successeur de HTML 4
et le prédécesseur de
XML
: il joue de rôle de passerelle entre
les deux langages. Voici treize règles pour passer de HTML à XHTML1.
Cliquez sur le titre d'une règle pour voir son contenu.
Une page Web normalisée pour le XHTML 1.0 se structure comme ceci :
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>titre de la page</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>… Le contenu de la page ... </p>
</body>
</html>
Les pages doivent être structurées de manière très rigoureuse comme ceci :
<html>
<head>
<title> ... </title>
</head>
<body>
</body>
</html>
Toute balise ouverte doit obligatoirement être fermée. Le cas typique, c'est la balise <p> qui marque un paragraphe. Il faut introduire à la fin du paragraphe la balise de fermeture </p>.
Les balises seules ne s'appliquent pas au texte : elles ont un rôle en elles-mêmes. Par exemple <br> (pour le saut de ligne) ou encore <img> (pour l'insertion d'une image). On pourrait les coder comme ceci : <br></br>, <img...></img>. Mais c'est inutile car le W3C a prévu une forme abrégée : <br />, <img />. N'oubliez surtout pas l'espace avant le / car les vieux navigateurs (Netscape 4 par exemple) ne pourraient pas les interpréter.
Ceci s'applique aux balises suivantes :
<area />,
<base />,
<basefont />,
<br />,
<col />,
<frame />,
<hr />,
<img />,
<input />,
<isindex />,
<link />,
<meta />,
<param />.
Quand vous ouvrez des balises successives, il faut obligatoirement les fermer dans l'ordre inverse de leur ouverture. Par exemple, ceci n'est pas correct :
<p>Paragraphe contenant <div> un calque </p> </div>
Mais ceci est correct :
<p>Paragraphe contenant <div> un calque </div></p>
Ou encore ceci :
<div><p>Calque contenant un paragraphe</p></div>
Le XML étant sensible aux majuscules et minuscules, toutes les balises et le nom des attributs qu'elles contiennent doivent être en minuscules.
Ceci n'est pas valable :
<H1 ID="TitrePrincipal">Titre</H1>.
Il faut plutôt faire ceci :
<h1 id="TitrePrincipal">Titre</h1>.
Toutes les valeurs d'attribut, quel que soit le type de données (texte, nombre, valeur logique) doivent être encadrées de guillemets simples ou doubles (" ou '). En outre, elles ne peuvent pas contenir d'espace, ni de saut de ligne ou de paragraphe.
Voici ce qu'il ne faut pas faire :
<div id=note prem></div>.
Faites plutôt :
<div id="noteprem"></div>
ou encore
<div id='note_prem'></div>.
En HTML, certaines balises possèdent des attributs qui peuvent être mentionnés sans valeur. Par exemple : l'attribut checked de la balise input. Bien qu'il s'agisse d'une redondance, la valeur de l'attribut doit obligatoirement être indiquée comme ceci checked="checked". Avant, vous pouviez encoder :
<input type="checkbox" checked>.
Il faut dorénavant encoder :
<input type="checkbox" checked="checked" />.
Cette règle s'applique aux attributs suivants :
checked,
compact,
declare,
defer,
disabled,
ismap,
multiple,
noresize,
noshade,
nowrap,
readonly et
selected.
En HTML, name servait à nommer les ancres ou tout autre élément (un calque, une image, ...). Il faut maintenant le remplacer par id. Mais, étant donné que peu de navigateurs interprètent id, il est préférable d'utiliser simultanément les deux attributs name et id en leur attribuant une valeur identique.
Ceci n'est donc plus correct :
<div name="texte">.
Mais ceci est correct :
<div name="texte" id="texte">.
Attention, l'attribut name ne peut plus du tout être utilisé dans les balises
a,
applet,
form,
frame,
iframe,
img, et
map. Seul id est acceptable.
L'attribut alt affiche une infobulle au passage de la souris ou remplace l'image dans le cas où celle-ci n'est pas affichée. Il doit être mentionné même s'il est vide. Comme ceci :
<img src="image.jpg" alt="un éléphant" />
Lorsque vous déclarez un script ou une feuille de style externe, le type des données doit être mentionné. Déclarez un script comme ceci :
<script language="javascript" type="text/javascript">
Et une feuille de style, comme ceci :
<link href="style.css" rel="stylesheet" type="text/css">
ou comme ceci :
<style type="text/css">
Dans les valeurs des attributs, y compris les URL, les caractères doivent être remplacés par leur entité. Par exemple :
© pour le signe du copyright. Ceci est surtout vrai pour les caractères qui ont une signification spéciale en HTML :
<,
>,
&.
Codez-les plutôt comme ceci :
<,
>,
&.
Voyez la correspondance entre les caractères et les entités.
Cette URL n'est pas correcte :
<a href="index.php?a=1&b=2">
Celle-ci est correcte :
<a href="index.php?a=1&b=2">
Vous ne pouvez plus inclure les blocs de style et de script entre <!-- et --->, ce qui empêchait les anciens navigateurs d'afficher le texte des éléments s'ils ne pouvaient pas l'interpréter. En XHTML strict, il faut insérer les scripts et les styles dans une section CDATA comme ceci :
<script language="javascript" type="text/javascript">
<![CDATA[Le code javascript]]>
</script>
Mais la plupart des navigateurs n'interprètent pas CDATA. Il est donc préférable d'isoler les CSS et les scripts dans des fichiers extérieurs. Il seront alors déclarés de la manière suivante :
<link href="style.css" rel="stylesheet" type="text/css">
et
<script src="script.js" type="text/javascript"></script>
