Docs HTML exécutables : Doctype

Q: Le doctype est-il sensible à la casse ?

Non. , et signifient la même chose. Le style le plus courant est DOCTYPE en majuscules et html en minuscules.

Q: Comment savoir si une page est en mode quirks ?

Ouvrez la console du navigateur et exécutez document.compatMode. "CSS1Compat" signifie mode standard (ou mode quirks limité), "BackCompat" signifie mode quirks.

Ce qu'est `<!DOCTYPE html>`

<!DOCTYPE html> est la déclaration de doctype : la première ligne d'un fichier HTML, avant la balise <html>. Elle dit au navigateur « ceci est un document HTML moderne », et le navigateur répond en affichant la page en mode standard, selon les spécifications actuelles de HTML et de CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My page</title>
</head>
<body>
  <h1>Hello</h1>
  <p>The doctype is the very first line of this file.</p>
</body>
</html>

Cette seule ligne constitue tout le doctype HTML5. Elle n'a pas de balise fermante et rien d'autre ne va à l'intérieur.

Règles de syntaxe

Il vient en premier. Seuls des espaces et des commentaires peuvent le précéder. Le moindre texte ou la moindre balise avant le doctype pousse le navigateur à l'ignorer.
Il est insensible à la casse. <!DOCTYPE html> et <!doctype html> sont identiques. Choisissez un style et gardez-le.
Ce n'est pas un élément. Il n'existe pas de </!DOCTYPE>, et vous ne pouvez pas lui ajouter une class ou d'autres attributs.
Le mot après DOCTYPE doit être html. <!DOCTYPE html5> n'est pas une version plus récente : le navigateur considère que cette page n'a pas de doctype valide.
Un seul par document. Une page construite à partir de plusieurs fichiers (templates, includes) produit quand même un seul doctype en haut du HTML final.

Mode standard et mode quirks

Les navigateurs ont trois modes de rendu, et le doctype en choisit un :

Mode	Déclenché par	Ce qui change
Mode standard	`<!DOCTYPE html>` et les autres doctypes modernes	Tout suit les spécifications actuelles
Mode quirks limité	HTML 4.01 Transitional ou Frameset avec une URL, XHTML 1.0 Transitional ou Frameset	Presque standard : seule une règle de hauteur de ligne diffère, si bien qu'une image seule sur une ligne (typiquement dans une cellule de tableau) n'a pas d'espace en dessous
Mode quirks	Aucun doctype, un doctype mal écrit, ou certains anciens comme HTML 4.01 Transitional sans URL	Imite les navigateurs des années 1990 : hauteurs en pourcentage, taille du texte dans les tableaux et hauteurs de ligne se comportent autrement

Le mode quirks existe pour que les pages écrites avant les standards du web s'affichent toujours comme leurs auteurs les voyaient. Pour une nouvelle page, il ne cause que des ennuis : un height: 100% qui marche sur une page et pas sur une autre, ou des tableaux qui ignorent votre taille de police, sont des symptômes classiques d'un doctype manquant.

Les aperçus des éditeurs de cette page s'affichent toujours en mode standard, donc supprimer un doctype à cet endroit ne vous montrera pas le mode quirks. Le vérificateur ci-dessous utilise DOMParser, qui applique les mêmes règles que les navigateurs au chargement d'un fichier. Modifiez le doctype dans la zone de texte et le mode se met à jour :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Doctype checker</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    textarea { width: 100%; height: 70px; font: 14px monospace; }
    #mode { font-weight: bold; padding: 8px 12px; border-radius: 6px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label for="src">First line of a document:</label>
  <textarea id="src"><!DOCTYPE html></textarea>
  <p>Rendering mode: <span id="mode"></span></p>
  <script>
    const src = document.getElementById('src');
    const mode = document.getElementById('mode');
    function check() {
      const doc = new DOMParser().parseFromString(src.value + '<p>x</p>', 'text/html');
      const standards = doc.compatMode === 'CSS1Compat';
      mode.textContent = standards ? 'standards (CSS1Compat)' : 'quirks (BackCompat)';
      mode.style.background = standards ? '#dcfce7' : '#fef3c7';
    }
    src.addEventListener('input', check);
    check();
  </script>
</body>
</html>

Essayez de supprimer la ligne, de taper <!DOCTYPE html5> ou de mettre un mot avant le doctype : chacune de ces modifications fait passer le résultat en quirks.

Anciens doctypes : HTML 4.01 et XHTML

Avant HTML5, un doctype désignait un fichier DTD avec un long identifiant public. On les trouve encore en haut des sites plus anciens :

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

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

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

Les navigateurs n'ont jamais téléchargé ces fichiers DTD. Ils lisaient seulement l'identifiant pour choisir un mode : HTML 4.01 Strict et XHTML 1.0 Strict donnent le mode standard, les versions Transitional donnent le mode quirks limité, et HTML 4.01 Transitional sans URL donne le mode quirks complet. Collez-en un dans le vérificateur ci-dessus pour le tester ; notez que compatMode signale le mode quirks limité comme CSS1Compat, la même valeur que le mode standard, donc seul le mode quirks complet apparaît comme BackCompat.

Remplacer un ancien doctype par <!DOCTYPE html> est sans risque pour les pages déjà en mode standard. Une page qui était en mode quirks peut bouger légèrement (en général les hauteurs et les espaces sous les images), alors vérifiez-la après le changement.

Le doctype dans le DOM

Le doctype devient un nœud DocumentType, séparé de l'élément <html>. Les scripts le lisent via document.doctype, et document.compatMode indique le mode dans lequel la page a fini :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>document.doctype</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    code { background: #e5e7eb; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>doctype name: <code id="name"></code></p>
  <p>compatMode: <code id="compat"></code></p>
  <p>first child of document: <code id="first"></code></p>
  <script>
    const dt = document.doctype;
    document.getElementById('name').textContent = dt ? dt.name : 'none';
    document.getElementById('compat').textContent = document.compatMode;
    document.getElementById('first').textContent = document.firstChild.constructor.name;
  </script>
</body>
</html>

document.compatMode est le moyen le plus rapide de vérifier n'importe quel site en ligne : ouvrez la console du navigateur et tapez-le. "CSS1Compat" signifie mode standard (ou quirks limité), "BackCompat" signifie mode quirks.

Un modèle HTML5 complet

Le doctype fait partie du document minimal par lequel toute page devrait commencer. Chaque ligne ci-dessous a un rôle :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Starter page</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
    li code { background: #e5e7eb; padding: 1px 5px; border-radius: 4px; }
  </style>
</head>
<body>
  <h1>Starter page</h1>
  <ul>
    <li><code>&lt;!DOCTYPE html&gt;</code> turns on standards mode</li>
    <li><code>lang="en"</code> names the page language</li>
    <li><code>charset="utf-8"</code> makes accented letters and emoji display correctly</li>
    <li><code>viewport</code> makes the page fit phone screens</li>
    <li><code>&lt;title&gt;</code> is the text on the browser tab</li>
  </ul>
</body>
</html>

L'attribut lang et la balise meta viewport ont chacun leur propre page.

Erreurs fréquentes

Quelque chose avant le doctype. Un caractère égaré, un echo de débogage d'un script serveur ou une balise HTML au-dessus de <!DOCTYPE html> fait passer toute la page en mode quirks. Les commentaires et les lignes vides ne posent pas de problème.
Inventer une version. <!DOCTYPE html5> ou <!DOCTYPE HTML 5> ne sont pas valides et déclenchent le mode quirks. Le doctype HTML5 est simplement <!DOCTYPE html>.
Le fermer. <!DOCTYPE html></!DOCTYPE> n'est pas du HTML valide. La déclaration n'a pas de balise de fin.
L'oublier dans les petits fichiers de test. Les bugs de mise en page que vous traquez dans un fichier brouillon sans doctype n'existent peut-être pas dans la vraie page, et inversement.
Garder un ancien doctype Transitional. Il met la page en mode quirks limité sans aucun avantage. Passez à <!DOCTYPE html>.

Questions fréquentes

À quoi sert <!DOCTYPE html> ?

Il indique au navigateur que la page est un document HTML moderne, qui s'affiche donc en mode standard. Sans lui, les navigateurs passent en mode quirks, qui imite les bugs des navigateurs de la fin des années 1990 et modifie le calcul de certaines mises en page et hauteurs.

<!DOCTYPE html> est-il obligatoire ?

La page se charge sans lui, mais le standard HTML l'exige et les navigateurs affichent alors la page en mode quirks. Mettez toujours <!DOCTYPE html> sur la première ligne.

Le doctype est-il sensible à la casse ?

Non. <!DOCTYPE html>, <!doctype html> et <!DocType HTML> signifient la même chose. Le style le plus courant est DOCTYPE en majuscules et html en minuscules.

DOCTYPE est-il une balise HTML ?

Non. C'est une déclaration, pas un élément : il n'a pas de balise fermante, on ne peut pas lui ajouter d'attributs et il n'apparaît pas dans document.body. Dans le DOM, c'est un nœud DocumentType distinct, accessible via document.doctype.

Quel est le doctype de HTML5 ?

<!DOCTYPE html>. HTML5 a abandonné les longs identifiants publics et les URL de HTML 4.01 et de XHTML, et cette forme courte est le seul doctype dont vous avez besoin pour une nouvelle page.

Comment savoir si une page est en mode quirks ?

Ouvrez la console du navigateur et exécutez document.compatMode. "CSS1Compat" signifie mode standard (ou mode quirks limité), "BackCompat" signifie mode quirks.

Concepts liés