A quoi sert la ligne DOCTYPE ?

A quoi sert la ligne DOCTYPE en tête de mes fichiers et que faut-il y mettre ?

Qu'est-ce-que c'est ?
A quoi ça sert ?
Le cas des Explorer et la commutation «mode Microsoft»/«mode W3C»
Est-il indispensable de mettre une URL ?
Compléments

1 — Qu'est-ce-que c'est ?

On parle de «doctype» pour faire court, mais il s'agit en fait d'une ligne de déclaration du type de document, qui indique au navigateur dans quel type de HTML la page a été écrite (HTML-3.2 «classique», HTML-4 de transition ou strict, XHTML, etc...). Dans une écriture plus complète, cette ligne a l'allure suivante :

<!DOCTYPE HTML PUBLIC   "type_de_HTML"   "adresse_de_DTD">

où

type_de_HTML est l'identificateur de la version du HTML utilisé.
et où adresse_de_DTD donne l'URL de la «document type declaration» (DTD), à savoir un document spécifiant les propriétés de chaque élément, balises et attributs, de ce type de HTML.

Par exemple, on pourra rencontrer la déclaration

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.0 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">

Ces doctypes sont généralement mis en place par l'éditeur HTML utilisé. La question de l'écrire soi-même ou de le modifier ne se pose que si on code soi-même ses pages à la main. A cette fin, nous avons réuni à la fin de cet article une liste des principaux doctypes utilisés pour les pages web.

2 — A quoi ça sert ?

Pour beaucoup d'entre nous, ça sert avant tout à faire passer nos pages au validateur du consortium W3C, afin de vérifier qu'on n'a pas fait d'erreur sur la syntaxe du HTML. Sans ce doctype, le validateur se borne à répondre qu'il ne peut pas deviner la nature du document et il se croise les bras.

Côté navigateur, d'abord, cette ligne n'est prise en compte que par les navigateurs les plus récents (comme Mozilla, NN7, Opera7, IE5 sur Mac ou IE6 sur Windows). En principe, cela permet un fonctionnement plus propre, du moins plus simple : par exemple, toute instruction illégale dans le cadre du HTML invoqué pourrait être purement et simplement ignorée. Sans ce doctype, le navigateur essaie de donner un sens à l'intruction litigieuse en revenant à des versions antérieures du HTML ou à des habitudes qui se sont mises en place dans les premiers navigateurs sans trop tenir compte de la norme internationale de l'époque. En général, il ne s'en tire pas trop mal parce que l'évolution du HTML s'est faite sans contradiction majeure d'une version à la suivante, mais on conçoit que cela puisse aboutir à des résultats parfois légèrement différents, et que ça ne simplifie pas le développement des navigateurs au fur et à mesure que les années passent.

On voit que cela demande deux modes de fonctionnement aux navigateurs : un mode strict, ou «conforme», ou «standard», en présence du doctype, et un mode plus indulgent en son absence. Les anglo-saxons parlent de Quirks Mode pour ce dernier, où quirk (sinusoïté, bizarrerie, excentricité) s'oppose à strict. En principe, on passe donc d'un mode à l'autre selon qu'on met le doctype ou non.

Les dernières versions de Mozilla ont introduit un troisième mode (almost standard mode, mode presque conforme), principalement pour les doctypes «XHTML Transitional» et «HTML 4.01 Transitional» — alors que le doctype «HTML 4.0 Transitional» ne conduit qu'au mode quirks. Le site mozilla.org détaille dans quels cas on obtient l'un ou l'autre de ces trois modes [1]. Cette référence énumère une liste de doctypes avec à chaque fois un petit test illustrant le mode obtenu [2]. On pourra récupérer le code de ce test pour l'exécuter en local avec le doctype de son choix, au cas où celui-ci ne serait pas dans la liste (par exemple le HTML 3.2 conduit bien au mode quirks :-)). On pourra aussi étudier ce code pour comprendre quelques unes des différences entre ces modes de rendu. Une liste plus étendue de ces différences se trouve dans [3].

3 — Le cas particulier des Explorer : du mode natif «microsoft» au mode conforme W3C

En général, avec tout navigateur autre qu'un Explorer (ou Opera-7), une fois que la page a été validée, son rendu ne change pas beaucoup si on enlève le doctype. Le navigateur passe en quirks mode, mais il se débrouille — en général, à nouveau — de manière satisfaisante.

Il en va différemment avec les Explorer. Leur quirks mode est un mode natif Microsoft qui diverge sur pas mal de points de la norme du W3C, de telle sorte qu'on a parfois des différences assez sensibles dans les rendus (parfois, pas systématiquement, il ne faut pas dramatiser !). Le désaccord le plus célèbre porte sur le modèle des boîtes, c.à.d. sur le sens des propriétés de style width et height, le résultat étant que les dimensions des boîtes peuvent changer quand on passe d'un Explorer à Mozilla.

Le basculement du mode «natif» au mode «conforme» est possible à partir de la version IE6 pour Windows ou IE5 pour Macintosh. En pratique, il est déclenché par l'un des doctypes suivants :

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0//FR">

(On peut remplacer HTML 4.0 par HTML 4.01 dans ces lignes, à ceci près que

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN">

laisse IE5-mac — mais pas IE6 — dans le mode natif. Il faut rajouter l'URL pour passer en mode conforme)

Ce qui se passe pour IE6-windows est abondamment commenté sur le site Microsoft même [4]. Il devrait y avoir un document analogue pour IE5-mac, mais nous n'avons pas su le trouver (!). Noter que la présence de l'URL n'est indispensable que dans le cas des HTML-4 transitional (et aussi du HTML 4.01 strict pour IE5-mac).

En fait, le navigateur ne contrôle pas la validité de cette adresse, il se contente tout simplement de détecter la présence de «http://»). Les URL sont facultatives pour les autres doctypes.

Mais l'histoire ne s'arrête pas là, il y a d'autres points à prendre en compte :

Le mode natif de IE6-windows correspond au comportement de IE5.5-windows. Celui de IE5-mac (qui était sorti à peu près en même temps que IE5.5) est beaucoup plus proche de la norme du W3C, mais cette évolution n'a pas été reprise pour IE6.
Si nous avons mis des guillemets au mode «conforme» des Explorer, c'est que celui-ci contient toujours de sérieuses lacunes par rapport à la norme (par exemple certains sélecteurs CSS ne sont pas pris en compte). Outre ces lacunes, le mode «conforme» de IE5-mac contient des bugs qui peuvent être très gênants, au point qu'il faudra bien réfléchir avant de demander ce mode conforme. Les liens ci-dessous donnent quelques exemples de pages qui fonctionnent mal (ou très mal :-)) :
- apparition d'un ascenseur horizontal. Nous avons souvent rencontré ce problème sans pour autant avoir compris ce qui le provoquait. Cela n'empêche évidemment pas de lire les pages, mais c'est irritant
- bug en centrage vertical. Il s'agit évidemment d'une application très particulière des CSS, mais l'échec est ici totalement inacceptable.
Ces bugs n'existent pas sur la version IE6 pour Windows.
Enfin, depuis sa version 7, Opera a décidé de s'aligner partiellement avec les Explorer. Son mode quirks incorpore certaines des particularités du mode Microsoft natif (le modèle des boîtes, par exemple) [5], et, en HTML-4 Transitional, la commutation dépend de la présence ou non d'une URL, comme pour les Explorer.

En fait, Opera 7 ne teste pas la conformité de l'URL, mais simplement la présence d'un deuxième argument dans le doctype. Dans ses versions précédentes (testé sur la version 6 pour Mac), Opera ne détectait pas le doctype et il adoptait systématiquement le modèle de boîte standard.

A noter que le mode quirks d'Opera-7 ne comporte pas tous les comportements non conformes des Explorer. Par exemple, un text-align:center dans une boîte ne permet de centrer que du texte et rien d'autre.

4 — Est-il indispensable de mettre une URL ?

Actuellement, dans la pratique, les URL dans la ligne «doctype» ne jouent pas du tout le rôle prévu à l'origine par le W3C.

Le validateur du W3C n'en tient actuellement aucun compte. On peut y mettre l'adresse attendue ou n'importe quoi d'autre, l'analyse de la page n'est pas modifiée. Apparemment, Mozilla et les autres navigateurs conformes font de même.
Actuellement, ces URL n'ont de réelle importance qu'en HTML-4 ou 4.01 Transitional, pour faire passer IE5-mac ou IE6 (ou Opera-7) du mode Microsoft à un mode «conforme». Mais ce mode est entaché de bugs parfois fort gênants dans le cas de IE5-mac, et il n'y a pas de solution satisfaisante pour s'en accommoder.
En tant qu'utilisateur de Mac, je serais bien sûr enclin à conseiller de ne jamais mettre d'URL, afin de laisser IE5-mac dans son mode natif, qui, au modèle de boîte près, n'est pas très éloigné du mode quirks de Mozilla. Mais cela laisse aussi IE6-windows dans son état natif, beaucoup moins conforme que celui de IE5-mac. Bien sûr, il y a des recettes d'écriture qui permettent de contourner les différences de modèle, mais c'est embêtant de vouloir que tout le monde se plie aux caprices de quelques uns.
Notez cependant qu'on peut faire passer IE6 en mode conforme tout en laissant IE5-mac en mode natif avec le doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">, sans URL.
La situation ressemble un peu au problème soulevé par les déficiences de NN4 au début de la popularisation des pages en CSS. IE5-mac est un navigateur très minoritaire (quelques petits pourcents des surfeurs, au plus la moitié des possesseurs de Mac) qui risque fort, en plus, de ne jamais plus connaître d'évolution. On ne peut pas demander à tous les auteurs de page web de regarder ce qui se passe sur IE5-mac ! La bonne attitude est plutôt d'insister pour que les utilisateurs de Mac installent Mozilla, ou (sur MacOS-X) Safari ou Chimera.

Mais le mode conforme de IE6 contient lui aussi des bugs qui peuvent être fort génants. Par exemple, il interdit le fonctionnement de nos scripts de bulles d'aide en javascript [1,2]. Ces scripts ne fonctionnent que si on reste en «mode Microsoft».

5 - Compléments

Principaux doctypes

Rappelons que ces doctypes ont la forme suivante

<!DOCTYPE HTML PUBLIC   "type_de_HTML"   "adresse_de_DTD">

où l'adresse est facultative. Le tableau ci-dessous donne une liste de quelques uns des éléments possibles

`type_de_HTML`	`adresse_de_DTD`
-//W3C//DTD HTML 4.01 Transitional//EN	http://www.w3.org/TR/html4/loose.dtd
-//W3C//DTD HTML 4.01//EN	http://www.w3.org/TR/html4/strict.dtd
-//W3C//DTD HTML 4.01 Frameset//EN	http://www.w3.org/TR/html4/frameset.dtd
-//W3C//DTD XHTML 1.0 Strict//EN	http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
-//W3C//DTD XHTML 1.0 Transitional//EN	http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
-//W3C//DTD XHTML 1.0 Frameset//EN	http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd

On peut prendre HTML 4.0 au lieu de HTML 4.01, mais le consortium W3C recommande ce dernier, plus récent. Pour les pages plus anciennes, si on tient à leur ajouter un doctype, on pourra prendre HTML 3.2 ou HTML 2.0.

Attention à ne pas laisser d'espace entre «Transitional» et le double slash final: le doctype est alors généralement non identifié et le navigateur quitte généralement le mode quirks qui pouvait être visé (par exemple, en HTML-4.0, Mozilla passe ainsi du mode quirks au mode standard).

Attention enfin en XHTML à ne pas précéder le doctype du prologue XML <?xml version="1.0"?>. Un bug de IE6 fait retourner celui-ci au mode «microsoft», ce qui n'est sûrement pas l'effet recherché en XHTML. Comme cette ligne est facultative, il vaut mieux s'en abstenir pour le moment.

Références externes

[1] le choix des modes de Mozilla selon le doctype
[2] un petit programme de test du mode de rendu de Mozilla (quirks, almost standard, full standard)
[3] les détails des modes quirks et almost standard de Mozilla
[4] passage au mode standard pour IE6
[5] le mode quirks et la commutation quirks/standard pour Opera-7

Charles
(merci à Pascal et François pour leurs avis)