Formation :
HTML en détails
XHTML en détails
DTD - Comment choisir ?
01 - Introduction :

Choisir entre les DTD HTML 4.01 et XHTML 1.0 :

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, vous devez placer en tête de chacune de vos pages, le code suivant :

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

Il s'agit de ce que l'on appelle une Déclaration de Type de Document (DTD), également nommée "doctype". Voici un rapide descriptif des 6 DTD entre lesquelles vous serez le plus souvent amenés à faire votre choix.

02 - A quoi sert la DTD ?

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. 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.

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".

03 - Choix de sa DTD :

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ë.

04 - HTML 4.01 transitional :


01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN"
02"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) ;
05 - HTML 4.01 strict :


01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.1//EN"
02"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).
06 - HTML 4.01 frameset :


01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
02"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.

07 - XHTML 1.0 transitional :


01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
02"http://www.w3.org/TR/xhtml1/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.

08 - XHTML 1.0 strict :


01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
02"http://www.w3.org/TR/xhtml1/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.

09 - XHTML 1.0 frameset :


01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
02"http://www.w3.org/TR/xhtml1/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.

DTD - Source : http://www.alsacreations.com/

  home