Doctype - noelno/dovelei GitHub Wiki

tl;dr

La déclaration DOCTYPE a un effet sur le mode de rendu de vieux navigateurs tels qu'Internet Explorer 6. Choisissez le bon DOCTYPE et vous aurez le rendu correspondant au mode que vous désirez (Quirks ou normal).

SGML et DTD

Pour qu'une machine comprenne le sens / rôle de chaque élément d'un contenu texte, il a besoin d'un marquage (markup), c'est à dire du texte supplémentaire distinct du contenu, qui lui indique ce sens.

Il a aussi besoin de la définition du sens de ce langage de marquage. Cette définition s'appelle une DTD ("Document Type Declaration" - "Déclaration du type de document"), et se fait sous forme d'un document spécifiant les propriétés de chaque élément, balises et attributs de ce langage.

SGML (pour Standard Generalised Markup Language (SGML) - Language de Marquage Standard Généralisé) est un méta-langage de marquage : c'est un langage de description à balises, utilisé pour définir la DTD du langage HTML entre autres.

Définition

La déclaration DOCTYPE a pour rôle de spécifier quelle version de html est utilisée (HTML-3.2 «classique», HTML-4 de transition ou strict, XHTML...) et l'adresse de la DTD associée

Il sert :

  • au validateur W3C, pour qu'il puisse rendre un verdict adapté à la version de html spécifiée.
  • aux navigateurs autour du début des années 2000 (Mozilla 2, NN7, Opera 7, IE5 sur Mac, IE6 sur Windows et toutes les versions ultérieures) pour qu'ils affichent la page en respectant les spécifications de la DTD.

Comportement

Avec un DOCTYPE conforme : navigateur en mode standard
Sans DOCTYPE sur un vieux navigateur : rien de particulier mais la page ne passera pas la validation W3C. En cas d'ajout d'un DOCTYPE son affichage peut s'en retrouver bouleversé.
Sans DOCTYPE sur un navigateur récent ou avec un DOCTYPE erroné/vieux : le navigateur passe en mode Quirks, en basculant vers un DOCTYPE plus ancien pour assurer un affichage conforme à celui des anciennes pages web.

Choix

Le <!DOCTYPE html> est le seul à déclencher le mode standard sur tous les navigateurs récents à partir des années 2000. On l'utilisera donc par défaut pour les nouveaux sites.
Les sites plus anciens utiliseront de préférence :

  • la DTD XHTML1.0 Strict par défaut
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • la DTD XHTML1.0 Transitional en cas d'utilisation d'iframe ou d'un attribut target
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • la DTD XHTML1.0 frameset en cas d'utilisation des éléments frame et frameset
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Exemple de déclaration de DOCTYPE

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

équivaut à var doctype[]; doctype['name'] = "-//W3C//DTD HTML 4.01 Frameset//EN"; doctype['source'] = "http://www.w3.org/TR/html4/frameset.dtd";

Exemple de syntaxe d'une DTD

 <!ENTITY %fontstyle "(tt | i | b)"> //les éléments de type "font style" sont <code>, <i> et <b> 
 <!ENTITY %inline "(#PCDATA | %fontstyle;)"> //les éléments de type inline sont des éléments texte (#PCDATA) ou des éléments de type "font style" 
 <!ELEMENT div (p | %inline;)+>  //les éléments div peuvent contenir uniquement au moins un <p> et/ou au moins un élément inline
 <!ATTLIST div align (left | right | center) #IMPLIED> //les éléments div ont pour attribut align, qui peut prendre la valeur "left","right" ou "center". Cet attribut est optionnel (#IMPLIED).

La syntaxe DTD est plus fournie, cf. DTD Attributes | W3schools
Un autre exemple de dtd est donné sur la page Wikipédia de Document Type Definition

Sources

⚠️ **GitHub.com Fallback** ⚠️