Servir du XHTML 1.0

Cet article décrit très sommairement certains aspects, souvent surprenants, de la façon dont les serveurs envoient le XHTML à l’agent utilisateur (un navigateur par exemple), et comment les agents utilisateurs courants traitent le balisage reçu. Il décrit des problèmes liés à l’implémentation, plus que les standards du w3C.

Ces informations proviennent du tutoriel sur les jeux de caractères et l’encodage dans un document HTML ou XHTML. Ces sujets jouent un rôle important dans la prise de décision. Cette information est aussi utile pour expliquer pourquoi certains aspects des styles CSS ne s’affichent pas comme prévu, ou diffèrent selon les agents utilisateurs.

XHTML et les types MIME

Lorsqu’un seveur envoie un document à un agent utilisateur (un navigateur par exemple) il envoie également des informations dans le champ Content-Type de l’en-tête qui accompagne la requête HTTP à propos du type de format de données. Cette information est donnée par l’appellation du type MIME. Voici un exemple d’en-tête HTTP pour un fichier HTML utilisant le type MIME 'text/html'. Notez que l’entrée Content-Type peut aussi définir l’encodage de caractères du document.

HTTP/1.1 200 OK
Date: Wed, 05 Nov 2003 10:46:04 GMT
Server: Apache/1.3.28 (Unix) PHP/4.2.3
Content-Location: CSS2-REC.en.html
Vary: negotiate,accept-language,accept-charset
TCN: choice
P3P: policyref=http://www.w3.org/2001/05/P3P/p3p.xml
Cache-Control: max-age=21600
Expires: Wed, 05 Nov 2003 16:46:04 GMT
Last-Modified: Tue, 12 May 1998 22:18:49 GMT
ETag: "3558cac9;36f99e2b"
Accept-Ranges: bytes
Content-Length: 10734
Connection: close
Content-Type: text/html; charset=utf-8
Content-Language: en

Normalement le serveur envoie les fichiers HTML 4.01 avec le type MIME text/html. HTML est une application de SGML.

Les choses ne sont pas aussi évidentes lorsqu’il s’agit de XHTML 1.0, qui est basé sur XML.

De nombreuses personnes préfèrent utiliser du XHTML pour les avantages qu’apporte XML en matière d’édition et de traitement des documents. Toutefois le manque de support du XML dans les navigateurs grand public est tel que de nombreux fichiers sont en fait servis avec le type MIME text/html. Dans ce cas l’agent utilisateur traitera le fichier comme du HTML.

Pour s’assurer que les petites différences entre XML et HTML ne posent pas de problèmes aux navigateurs les plus anciens, vous devriez toujours suivre les « Règles de Compatibilité HTML » définies dans l’Annexe C de la spécification XHTML lorsque vous servez du XHTML comme du HTML. Ces règles de compatibilité recommandent, entre autres choses, de laisser un espace avant le « /> » terminant une balise vide (comme img, hr ou br), de toujours utiliser à la fois l’attribut id et l’attribut name comme identifiants, etc.

Le XHTML 1.0 peut également être servi en tant que XML, et XHTML 1.1 est toujours servi en tant que XML. Pour servir du XHTML en tant que XML on utilise un des types MIME application/xhtml+xml, application/xml ou text/xml. Le W3C recommande de servir le XHTML en tant que XML uniquement avec le premier de ces types MIME, soit application/xhtml+xml.

Le fait que le XHTML puisse être servi en tant que HTML ou XML entraîne une différence dans la façon dont l’information d’encodage doit être déclarée.

Mode « standards » contre mode « Quirks »

Les navigateurs grand public actuels peuvent afficher un fichier HTML soit en mode « standards » soit en mode « quirks ». Cela signifie que des règles différentes seront appliquées pour afficher le fichier, la première se conformant à une interprétation du comportement attendu conforme aux standards du w3C, la seconde se conformant à d’autres attentes basées sur le comportement non standard des anciens navigateurs.

Les captures d’écran ci-dessous illustrent certaines de ces différences.

Un document rendu en mode standard.	Le même document rendu en mode quirks.

Les différences illustrées ci-dessus comprennent :

En mode standard, la valeur de l'attriubt width de CSS n’inclue pas les valeurs de padding et de border, contrairement au mode quirks — c’est pourquoi la grande boîte est plus étroite dans la deuxième image.
La police est réglée avec CSS à une taille assez large pour la balise body (et, par héritage, tous les autres éléments), et réduite de 50 % pour les éléments p. En mode quirks la table n’hérite pas de la taille de police de l’élément body, donc le texte est plus petit. (Notez que le texte de la grande boîte a la même taille, puisque il n’est pas dans une table, mais dans un élément p).

Les deux images montrent la même page avec exactement le même balisage et les mêmes styles CSS. La seule différence dans la source des deux fichiers est que l’image de gauche contient en début de fichier une déclaration de DOCTYPE, et pas celle de droite. Un fichier avec une déclaration de DOCTYPE appropriée devrait normallement être en rendu en mode standard par les versions récentes de la plupart des navigateurs. Sans DOCTYPE, vous retombez en mode quirks.

On dit des navigateurs qui passent ainsi d’un mode à l’autre qu’ils font du « doctype switching ».

Le paragraphe suivant présente le code source avec la déclaration de DOCTYPE en début de fichier (en rouge et italique).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Document XHTML</title>
    <style type="text/css">
    body { background: white; color: black; font-family: arial, sans-serif; font-size: 25px; }
    p { font-size: 50%; }
    h1 { font-size: 16px; }
    div { margin: 20px; width: 170px; padding: 50px; border: 6px solid teal; }
    </style>
</head>
<body>
    <h1>Fichier de test pour le mode « standards »</h1>
    <div>
        <p>Ce texte est contenu dans un p contenu dans une div.</p>
    </div>
    <table border="1">
        <tr>
            <td><p>Texte dans une balise p.</p></td>
            <td><p>Texte dans une balise p.</p></td>
        </tr>
        <tr>
            <td>Aucune balise p.</td>
            <td>Aucune balise p.</td>
        </tr>
    </table>
</body>
</html>

C’est généralement une bonne idée de toujours servir vos pages en mode standard, c’est-à-dire de toujours inclure une déclaration de DOCTYPE.

La déclaration XML

Parce que le XHTML 1.0 est basé sur XML, il est courant d’ajouter une déclaration XML au début du balisage, même s’il est servi en tant que HTML. Voici à quoi le haut du fichier ci-dessus ressemblerait (la déclaration XML est en rouge et en italique) :

<?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 xml:lang="fr" lang="fr">
<head>
...

Dans des navigateurs tels que Mozilla, Netscape, Opera et d’autres, avec ou sans déclaration XML, une page servie avec une déclaration de DOCTYPE sera rendue en mode standard.

Avec Internet Explorer cependant, si quoi que soit apparaît avant la déclaration de DOCTYPE, la page est rendue en mode quirks. Parce que les utilisateurs d’Internet Explorer représentent une très forte proportion des utilisateurs de navigateurs, le problème est de taille. Pour vous assurer que vos pages seront rendues de la même façon dans tous les navigateurs respectant les standards, vous devrez bien réfléchir à la façon de gérer ce problème.

Différentes possibilités s’offrent à vous. Il est évident que si votre document ne contient aucun des constructions affectées par les différences entre les modes standard et quirks, la question ne se pose pas. Si en revanche vous êtes confronté au problème, vous aurez à incorporer des techniques de contournement dans vos CSS pour pallier les différences, ou bien omettre la déclaration XML.

La spécification XHTML nous avertit également que les instructions de traitement sont rendues littéralement par certains agents utilisateurs. De même, certains agents utilisateurs considèrent que la déclaration XML signifie que le document est du XML non reconnu plutôt que du HTML et risque donc de ne pas être rendu comme prévu. Vous devriez faire ds tests sur différents agents utilisateurs afin de décider si ce problème vous concerne.

Notez que si vous décidez d’omettre la déclaration XML vous devriez opter soit pour UTF-8 soit pour UTF-16 comme encodage de caractères pour la page. (Consultez les jeux de caractères et les encodages dans XHTML, HTML et CSS pour plus d’informations concernant l’impact des déclarations d’encodage).

Résumé

Le XHTML 1.0 peut être servi en tant que HTML ou en tant que XML. Si vous le servez en tant que XML, utilisez le type MIME application/xhtml+xml.

Utiliser une déclaration de DOCTYPE en début de fichier HTML ou XHTL est généralement une bonne idée pour que le document soit rendu en mode standard par un plus grand nombre d’agents utilisateurs récents.

La présence d’une déclaration XML dans un fichier XHTML 1.0 servi en tant que HTML aura pour conséquence de rendre le fichier en mode quirks sous Internet Explorer (et donc pour une part potientiellement importante de votre public).

Pour de plus amples détails sur ces sujets, suivez les liens utiles, et consultez les pages vers lequelles ils vous emmènent.

Lectures complémentaires

Types de média XHTML http://www.w3.org/TR/2002/NOTE-xhtml-media-types-20020801/

XHTML™ 1.0 : Le langage de balisage hypertexte extensible (seconde édition) http://www.w3.org/TR/2002/REC-xhtml1-20020801/

Jeux de caractères et encodages dans XHTML, HTML et CSS http://www.w3.org/International/tutorials/tutorial-char-enc/

Liste de DTD valides utilisables dans vos documents http://www.w3.org/QA/2002/04/valid-dtd-list

Le doctype switching d’Internet Explorer http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

Le doctype switching de Mozilla http://www.mozilla.org/docs/web-developer/quirks/

Le doctype switching d’Opera http://www.opera.com/docs/specs/doctype/index.dml