Le 26 janvier 2000, le XHTML 1.0 est devenu une nouvelle norme du W3C pour réaliser des pages de navigation hypertexte.
Le XHTML marque une évolution vers une plus grande rigueur par rapport au HTML. Elle est accompagnée par une volonté de séparer la forme du fond.
Le XHTML a pour but de distinguer la présentation du contenu (en fond et en structure logique) de la forme (les couleurs, les polices, le gras
et l'italique, etc.). Le langage XHTML se charge du fond tandis que la forme est dévolue aux feuilles de style (css). Dans le même esprit, pour y
voir plus clair dans les pages, il y a tout intérêt à bien séparer les portions de code effectuant des calculs (JavaScript, par exemple).
Cela dit, en pratique, les différences à maîtriser pour passer du HTML au XHTML restent modérées.
Cette page décrit la douzaine de règles de base à connaître pour passer du HTML 4 au XHTML 1.0.
Les deux annexes à la fin de cette page présentent les principales balises de mises en forme obsoletes et nouvelles (annexe 1) et donnent des modèles de pages htm directement utilisables (annexe 2).
Celle ci peut se réaliser par une balise associée ou, pour quelques unes, dans la balise elle-même:
<html></html>
<body></body>
<p></p>
<script></script>
<br />
<link />
<meta />
<img />
La fermeture des balises s'effectue dans l'ordre inverse de leur ouverture. Ce n'est pas vraiment une nouveauté puisque c'était déjà logique de procéder ainsi en HTML mais XHTML est moins permissif.
<p>Ce paragraphe contient un texte <strong>mis en évidence</strong>.</p>
Autrement dit, XHTML est sensible à la casse et il faut abandonner ses vieilles habitudes.
<div id="UneDivision"></div>
A noter : les noms des attributs doivent être en minuscules mais leurs valeurs peuvent contenir des majuscules.
Par ailleurs, ce n'est pas interdit, mais il vaut mieux éviter les espaces dans les valeurs d'attributs pour éviter des désagréments aux utilisateurs de certains navigateurs.
Les formes abrégées comme checked et readonly, par exemple, ne peuvent plus être employées. Il faut dorénavant écrire:
<option value="MonOption" selected="selected"></option>
Cependant, pour assurer l'interopérabilité avec des navigateurs qui ne supportent pas encore xhtml, il est possible d'écrire :
<p id="titre" name="titre">Un texte</p>
De plus, l'attribut "name" des balises a, applet, form, frame, iframe, img, and map est obsolète. Ne plus l'employer en XHTML.
En fait, il n'est pas bien vu, en xhtml, d'ouvrir une nouvelle fenêtre pour suivre un lien. Du coup, l'attribut target a disparu. Si l'auteur du site tient absolument à ouvrir une nouvelle page, tout en restant conforme au standard xthml strict, il devra passer par un petit JavaScript.
En XHTML il n'est plus possible d'inclure les blocs de code (CSS et JavaScript) dans des balises de commentaires comme en HTML. L'alternative consiste en principe à inclure les scripts et les styles dans une section CDATA, qui conduira les navigateurs conformes à XML à interpréter correctement les caractères spéciaux comme >, < et &.
<script type="text/javascript">
//<![CDATA[
Le code JavaScript
//]]>
</script>
MAIS, évidemment, cela ne plaira pas aux navigateurs qui en sont encore au HTML et qui vont ignorer la balise XML CDATA. Certes, il est possible de commenter les lignes correspondantes comme ci-dessus mais ce n'est pas très élégant. Cela incite fortement à exporter les CSS ou et codes JavaScript dans des fichiers spécifiques.
Pour ce faire, il suffit de placer entre les balises <head> et </head> :
<script type="text/javascript" src="mon_fichier.js"></script>
et de créer un fichier mon_fichier.js qui contient uniquement le code JavaScript<link rel="stylesheet" type="text/css" href="mes_styles.css" />
et de créer le fichier mes_styles.css qui contient la définition des styles, par exemple:
=== début de citation === (ligne non incluse dans le fichier mes_styles.css)
body
{
font-family: arial, verdana, trebuchet MS, sans-serif ;
color: black ;
font-size: 10pt ;
text-align: justify ;
background-color: #FFFFFF ;
}
h3
{
color: red ;
font-size: 120% ;
}
h4
{
color: blue ;
}
h5
{
color: red ;
font-size: 110% ;
}
=== fin de citation === (ligne non incluse dans le fichier mes_styles.css)
Les caractères spéciaux dans les valeurs d'attributs doivent être encodés. Tous les caractères spéciaux comme « < », « > » ou « & » destinés à être interprétés tels quels doivent être écrits sous la forme « < », « > » ou « & ».
Par exemple, dans un hyperlien, l'adresse index.php?a=1&b=2 doit être rendue par :
<a href="index.php?a=1&b=2">
Voir la liste des entités xhtml.
... du moins, en principe.
Par exemple, pour l'encodage ISO-8859-15, cette déclaration prend la forme :
<?xml version="1.0" encoding="iso-8859-15"?>
Cela dit, comme les anciens navigateurs ignorent cette déclaration, il est prudent d'inclure également la balise meta :
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
La déclaration de type de document (DTD) doit apparaître juste avant l'élément <html>, avec trois options possibles : strict, transitional ou frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
L'élément racine du document est <html> et il doit se référer à un espace de nom par l'attribut "xmlns". Il peut également déclarer la langue principale du document, comme dans :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
En fait, c'est simple : sont obsolètes les balises qui servaient à graver directement la forme du texte dans le marbre du codage HTML. Exit donc les mise en gras par <b>, l'imposition de police par <font>, ... En XHTML, ces procédés sont remplacés par des balises qui disent quelque chose sur la nature du contenu : important, très important ou passage à distinguer pour une raison quelconque. Leur avantage est qu'elles donnent plus de souplesse à la mise en forme.
Le tableau suivant donne quelques exemples des principales balises obsolètes et des nouvelles utilisables pour identifier les portions de texte destinées à recevoir une mise en forme particulière. Une fois ceci fait, un outil puissant pour gérer la mise en forme est la notion de classe mais sa description dépasse le cadre de la présente fiche et le lecteur voudra bien se reporter à un cours de CSS comme cette introduction au CSS ou bien
ce cours pour débutants ou encore
les
articles d'alsacreations, par exemple.
| Obsolètes | Nouvelles | ||
| <u></u> | Avait pour effet de souligner le texte entre les balises | <em></em> | Indique que le texte entre les balises doit être accentué (emphasized). |
| <b></b> | Avait pour effet de mettre en gras le texte entre les balises | <strong></strong> | Indique que le texte entre les balises doit être fortement accentué. |
| <i></i> | Avait pour effet de mettre en italique le texte entre les balises | <i lang="en"></i> | Indique que le texte entre les balises est dans une langue différente de la langue principale du document (ici l'anglais, par exemple ; la mention de la langue est facultative). |
| <font></font> | Servait à paramétrer la police à utiliser pour le texte entre les balises | <span class="MaClasse"></span> | Indique que le texte entre les balises appelle un traitement particulier spécifié par la classe MaClasse définie par la feuille de style |
<?xml version="1.0" encoding="iso-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Le titre</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-15" />
</head>
<body>
Le texte de la page.
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Le titre</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
</head>
<body>
Le texte de la page.
</body>
</html>