Niveau Niveau confirmé

Les DTD HTML4.01, XHTML1.0 et HTML5 : quel doctype choisir ?

Articlehtml

Publié par le , mis à jour le (256153 lectures)

xhtml doctype choisir document type

Si vous avez adopté la démarche de mise en conformité de votre site Web avec les Standards (X)HTML et CSS définis au sein du W3C, ou si vous vous apprêtez à le faire, vous ne pouvez manquer d'avoir à placer, en tête de chacune de vos pages, une étrange portion de code du type :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Il s'agit de ce que l'on appelle une Déclaration de Type de Document (DTD), également nommée "doctype". Voici une introduction à cette notion, suivie d'un rapide descriptif des 6 DTD entre lesquelles vous serez le plus souvent amenés à faire votre choix. Ce problème du choix de la DTD est développé ici en 2 versions successives : une première version, détaillée, une seconde version très simple, si vous voulez une réponse immédiate à la question : qu'est-ce que je mets au début de ma page Web ?

Avertissement :

  • Ces explications se placent uniquement dans l'optique "Faire un document (X)HTML qui sera traité en tant que HTML", et non en tant que XML ;
  • Cette optique répond en effet à la plupart des besoins courants à l'heure actuelle : on n'abordera donc pas ici le cas des DTD XHTML1.1 et au-delà, de mise en oeuvre nettement plus complexe, et qui répondent actuellement à des besoins très spécifiques.
  • Pragmatiques, ces explications ne sont pas exemptes de simplifications.
  • Si vous souhaitez faire du HTML5, n'allez pas plus loin et utilisez le doctype simplifié : <!doctype html>

DTD, qu'est-ce que c'est ? A quoi ça sert ?

Le doctype et la Définition de Type de Document

Le "Doctype", souvent appelé DTD (Déclaration de Type de Document) sert à indiquer à quelles règles d'écriture obéit le code d'une page HTML ou XHTML. Ces règles sont en fait contenues dans des documents assez particuliers, les Définitions de Type de Document (abrégé également sous la forme DTD), écrites dans un langage qui vous paraîtra sans doute un peu barbare, et hébergées sur le site du W3C (pour celles qui nous intéressent ici). Si vous êtes curieux, et que vous voulez voir un exemple, téléchargez celle-ci. Mais attention, vous serez surpris : en effet, les DTD sont destinées à être lues avant tout par les "machines" logicielles, et non par des êtres humains.

A qui sert la DTD ?

Contrairement à ce qu'on pourrait croire, elle ne sert pas aux navigateurs Web actuels à comprendre la structure d'une page (X)HTML : ceux-ci "lisent" ce code (X)HTML sans se servir de la DTD pour le déchiffrer, en se servant seulement des "règles" contenus dans leur propre "moteur" .

En revanche, la DTD est indispensable aux validateurs (X)HTML comme celui du W3C, qui en ont besoin pour savoir à quelles règles le document est supposé obéir. Certes, il est possible de forcer la validation en l'absence de DTD, en utilisant l'interface étendue du validateur du W3C.

Mais un document même valide et dénué de DTD posera un problème de rendu dans les navigateurs modernes, que nous allons examiner ci-dessous : le rendu CSS diffèrera en effet selon la présence ou non d'une DTD, en raison du mécanisme du "doctype switching".

Le doctype switching, un détail imprévu, important pour le rendu

Les DTD ont tout de même une influence sur le comportement des navigateurs modernes. Elles n'ont pas été prévues pour cela, mais c'est une "astuce" qui a été créée par les fabriquants de navigateurs pour arriver à distinguer :

  • les pages web codées à l'ancienne, c'est à dire indifférentes au respect d'un format normalisé universel, optimisées pour tel ou tel navigateur, et dépendantes de modes de rendu propriétaires ;
  • et les pages web valides (X)HTML, a priori interprétables par tous les navigateurs de la même manière.

Le navigateur ne va en effet pas traiter le code HTML et le code CSS de ces pages de la même façon. Pourquoi ? Parce que s'il appliquait les règles de traitement du (X)HTML-CSS moderne aux pages à l'ancienne, le résultat affiché pourrait être catastrophique :

  • certains codes propriétaires du navigateur X pourraient ne plus être reconnus de la même manière par celui-ci, ni émulé par les autres navigateurs. Tous ont besoin de se reposer sur leur propre mode de gestion des erreurs pour rendre de manière aussi cohérente que possible ces documents qui n'obéissent pas à des règles suffisamment précises (les spécifications HTML ne définissent pas de manière exhaustive ce mode de gestion d'erreur).
  • Le mode d'application des styles CSS diffère entre le standard et les anciennes implémentations.

C'est donc un "simple" (sic) problème de compatibilité. Concrètement, Internet Explorer Windows depuis sa version 6.0, IE5Mac, Opera, FireFox, Safari, etc. rangent simplement les DTD en deux catégories (au moins), qu'on peut résumer en distinguant :

  • les DTD incomplètes, incorrectes, périmées, etc. (ou l'absence de DTD) : la page est présumée "codée à l'ancienne", et le rendu se fera en mode "quirks", compatible avec les anciennes implémentations de chaque navigateur ;
  • les DTD complètes et récentes (indiquées ci-dessous) : la page est présumée codée en respectant la norme indiquée par la DTD, et le rendu se fera en mode "strict", conforme aux standards en vigueur.

En pratique, faut-il tenir compte du doctype switching ?

Non. C'est à dire :

  • Qu'il peut vous permettre de régler la question du rendu d'anciennes pages dont vous ne souhaitez pas corriger le code ;
  • Mais qu'il ne faut surtout pas utiliser volontairement une DTD qui va basculer le navigateur en mode Quirks dans un nouveau site, une nouvelle page, ou un contenu que vous mettez en conformité avec les standards.

En effet, ce mode est conçu pour traiter le rendu des anciennes pages qui ne peuvent être mises aux normes pour d'évidentes raisons de coût. Il n'a pas été conçu pour en créer de nouvelles, sauf dans le cas très particulier où vous seriez, par exemple, totalement dépendant des implémentations propriétaires Microsoft : ceci concerne des "grands comptes" clients, parmi lesquels vous ne figurez sans doute pas. Contrairement à eux, vous avez très probablement la possibilité de revoir votre code sans que le coût de cette mise au norme ne soit prohibitif, ou d'adopter de nouvelles et bonnes pratiques de codage, sans que l'incompatibilité de vos nouvelles pages avec les anciennes ne soit un problème ingérable.

Tant que l'on peut produire un code validable, on utilisera donc systématiquement des DTD correctes, complètes, et le mode strict de rendu des navigateurs, en adaptant les données de présentation CSS en conséquence : plutôt que d'adapter le code ou la DTD à un choix de propriétés CSS, on fera la démarche inverse en posant d'abord ses choix de structure et de validité avant de s'occuper de présentation.

Concrètement, si par exemple, vous constatez que votre mise en page repose sur le modèle de boîte CSS non standard, propre à Microsoft : ne jouez pas sur la DTD pour faire passer Internet Explorer en mode Quirks (où il applique ce modèle propriétaire) ; restez dans une des DTD ci-dessous, et refaites votre présentation en respectant le modèle de boîte CSS2.1. Votre design y gagnera en robustesse, et vous-même y gagnerez en compétences.

S'il est impossible, pour une raison ou une autre, de produire un code validable (présence forcée d'un élément propriétaire), et seulement dans ce cas : ne pas mettre de DTD. Par exemple, si l'utilisation d'un élément <marquee> vous est imposée : ne mettez pas de DTD en recourant à une astuce éventuelle pour masquer votre <marquee> au validateur. Cette DTD et votre validité de pure forme n'auront aucune utilité.

Précisons enfin que les 6 DTD indiquées ci-dessous feront toutes fonctionner les navigateurs modernes en mode de rendu strict, même si elles ne s'appellent pas elles-mêmes toutes "strict".

Choisir sa DTD, version détaillée

Vous disposez actuellement, et pour ce qu'il s'agit de faire ici, de 6 DTD. Ni plus, ni moins. En pratique, deux d'entre elles suffisent à répondre à la majorité des besoins. Qu'est-ce qui les différencie ? Essentiellement :

  • Des règles de syntaxe HTML différentes : vous n'écrirez pas votre balisage de la même manière ;
  • Un stock de balises légèrement différent entre les trois catégories transitionnelle, stricte et frameset, sachant que la principale différence concerne les balises servant uniquement à créer des effets de présentation du texte. Ces effets peuvent être gérés de manière plus simple et plus souple à l'aide des styles CSS. D'autant plus, pour tout dire, qu'il s'agit des propriétés CSS les plus faciles à mettre en oeuvre pour un débutant (alignement du texte, apparence des bordures, italique et couleurs, etc.). ;

C'est donc à vous de choisir en fonction des contraintes que vous êtes prêts à accepter dans l'écriture de votre code, sachant qu'accepter une grammaire plus contraignante (XHTML) ne vous compliquera pas la tâche, au contraire : vous devrez évidemment être plus soigneux dans l'écriture de votre code ou dans le choix de votre outil d'édition. Mais vous compenserez largement cet effort en produisant un code dont l'interprétation (et donc le rendu) n'est pas ambiguë.

Voici, à titre indicatif, les principaux critères de choix entre ces différentes DTD :

HTML5 :

<!DOCTYPE html>

Ici point de mystère, le nouveau doctype pour HTML5 est allégé et simplifié. Il n'entraîne pas les navigateurs sur la voie glissante du mode Quirks.

HTML4.01 transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
  • le document est du HTML : il ne peut pas être traité comme du XML ;
  • pas de balises propriétaires (<marquee>, <embed>, etc) ;
  • la fermeture des balises area, dt, dd, p, li, thead, tfoot, colgroup, col, tr, th et td est optionnelle ;
  • les balises peuvent être écrites en majuscules ou en minuscules ;
  • pour les valeurs des attributs HTML, les guillemets peuvent être omis si la valeur de l'attribut ne contient que des lettres (a-z et A-Z), des chiffres (0-9), le caractère trait d'union (-), le caractère virgule (,), le caractère souligné (_) et le caractère deux-points (:) ;
  • les attributs peuvent être minimalisés : on écrit <OPTION selected> au lieu de <OPTION selected="selected">
  • les attributs et éléments de présentation suivants sont autorisés :
    • Eléments BASEFONT et FONT ;
    • Eléments CENTER, U, STRIKE et S ;
    • Attributs ALINK, BACKGROUND, BGCOLOR, LINK, VLINK, TEXT de l'élément BODY ;
    • Attributs BGCOLOR, HEIGHT, NOWRAP, WIDTH des éléments internes de tableaux  ;
    • Attributs BORDER, HSPACE, VSPACE des images et objets ;
    • Attributs CLEAR, NOSHADE, SIZE, WIDTH des lignes de séparation HR ;
    • Attributs COMPACT, TYPE des éléments de liste, et attributs START, VALUE des listes numérotées ;
    • Attribut WIDTH de l'élément PRE ;
  • l'attribut target des liens est autorisé ;
  • les éléments IFRAME sont autorisés (mais pas FRAMESET ni FRAME) ;

HTML4.01 strict

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

Comme en HTML4.01 transitional :

  • le document est du HTML : il ne peut pas être traité comme du XML ;
  • pas de balises propriétaires (<marquee>, <embed>, etc) ;
  • la fermeture des balises area, dt, dd, p, li, thead, tfoot, colgroup, col, tr, th et td est optionnelle ;
  • les balises peuvent être écrites en majuscules ou en minuscules ;
  • pour les valeurs des attributs HTML, les guillemets peuvent être omis si la valeur de l'attribut ne contient que des lettres (a-z et A-Z), des chiffres (0-9), le caractère trait d'union (-), le caractère virgule (,), le caractère souligné (_) et le caractère deux-points (:) ;
  • les attributs peuvent être minimalisés : on écrit <OPTION selected> au lieu de <OPTION selected="selected">

Mais, à l'inverse du HTML4.01 transitionnel :

  • les attributs et éléments de présentation précédents ne sont plus autorisés. Ils doivent être remplacés par des styles CSS ;
  • l'attribut target des liens n'est pas autorisé ;
  • les IFRAME ne sont pas autorisés (ni FRAMESET et FRAME).

HTML4.01 frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

Les règles sont identiques à HTML4.01 transitionnel, mais l'élément BODY n'existe plus. Il est remplacé par l'élément FRAMESET, qui contient les éléments FRAME.

XHTML1.0 transitional :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Le document peut être traité comme du HTML (ce que vous allez faire en pratique) mais aussi comme du XML (ce qui est plus compliqué, et qu'Internet Explorer ne sait pas faire correctement dans ce cas).

Les règles de syntaxes sont différentes de celles du HTML :

  • les balises propriétaires ne sont pas autorisées ;
  • toutes les balises sans exceptions doivent être fermées ;
  • toutes les balises et leurs attributs doivent être en minuscules ;
  • les attributs ne peuvent plus être minimalisés : on ne peut plus écrire <option selected>. Il faut écrire uniquement <option selected="selected"> ;
  • les guillemets sont obligatoires autour de toutes les valeurs d'attributs ;

Mais, exactement comme en HTML4.01 transitionnel (si ce n'est le fait de les écrire en minuscules) :

  • les attributs et éléments de présentation suivants sont autorisés :
    • Eléments basefont et font ;
    • Eléments center, u, strike et s ;
    • Attributs alink, background, bgcolor, link, vlink, text de l'élément body ;
    • Attributs bgcolor, height, nowrap, width des éléments internes de tableaux  ;
    • Attributs border, hspace, vspace des images et objets ;
    • Attributs clear, noshade, size, width des lignes de séparation hr ;
    • Attributs compact, type des éléments de liste, et attributs start, value des listes numérotées ;
    • Attribut width de l'élément pre ;
  • l'attribut target des liens est autorisé ;
  • les éléments iframe sont autorisés (mais pas frameset ni frame) ;

Bref : le stock de balises disponibles est le même qu'en HTML4.01 transitional, mais leur syntaxe est plus rigoureuse.

XHTML1.0 strict :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Comme en XHTML1.0 transitionnel, les règles de syntaxe sont strictes :

  • Le document peut être traité comme du HTML (ce que vous allez faire en pratique) mais aussi comme du XML (ce qui est plus compliqué, et qu'Internet Explorer ne sait pas faire correctement dans ce cas) ;
  • les balises propriétaires ne sont pas autorisées ;
  • toutes les balises sans exceptions doivent être fermées ;
  • toutes les balises et leurs attributs doivent être en minuscules ;
  • les attributs ne peuvent plus être minimalisés : on ne peut plus écrire <option selected>. Il faut écrire uniquement <option selected="selected"> ;
  • les guillemets sont obligatoires autour de toutes les valeurs d'attributs ;

Mais, à l'inverse du XHTML1.0 transitionnel, et exactement comme en HTML4.01 Strict :

  • les attributs et éléments de présentation précédents ne sont plus autorisés. Ils doivent être remplacés par des styles CSS ;
  • l'attribut target des liens n'est pas autorisé ;
  • les iframe ne sont pas autorisés (ni frameset et frame).

Bref: le stock de balises disponible est le même qu'en HTML4.01 strict, mais leur syntaxe est plus rigoureuse.

XHTML1.0 frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Les règles sont identiques à XHTML1.0 transitionnel, mais l'élément body n'existe plus. Il est remplacé par l'élément frameset, qui contient les éléments frame.

Bref : le stock de balises disponibles est le même qu'en HTML4.01 frameset, mais leur syntaxe est plus rigoureuse (vous l'aviez deviné, n'est-ce pas ?)

Choisir sa DTD, version pour lecteurs pressés

Utilisez de préférence XHTML1.0 Strict : c'est a priori la plus adaptée à vos besoins et c'est la plus facile à utiliser et à apprendre.

Si vous utilisez des iframe ou un attribut target, Utilisez XHTML1.0 transitional.

si vous voulez utiliser les frameset et frame : utilisez la DTD XHTML1.0 frameset.

Un outil de création de structures (X)HTML

Pour vous aider à concevoir les squelettes de vos pages (X)HTML selon le Doctype choisi, Alsacréations a mis en place un outil nommé Squelettor.

outil Tester le générateur de squelettes (X)HTML

Conclusion

En guise de conclusion, soulignons 4 constats sur lesquels les malentendus sont fréquents :

  • XHTML1.0 ne sépare pas plus le contenu et la présentation qu'HTML4.01 : dans les deux cas, c'est en fait le choix entre strict et transitional qui fait la différence ;
  • Aucune de ces DTD n'apporte plus d'accessibilité a priori : XHTML1.0 n'est pas plus accessible qu'HTML4.01. C'est l'usage que vous en ferez qui fera la différence ;
  • XHTML1.0 n'apporte aucun gain &#8220;sémantique&#8221; par rapport à HTML4.01, dont il reprend les éléments et la quasi-totalité des attributs. Là encore, c'est ce que vous en ferez qui fera la différence.
  • Mais XHTML1.0 n'est pas plus difficile à apprendre qu'HTML4.01, au contraire : la syntaxe rigoureuse limite les risques d'erreurs.