Déclaration HTML <!DOCTYPE>
Apprenez la déclaration HTML <!DOCTYPE> : utilisez <!DOCTYPE html> pour activer le mode Standards, éviter le mode Quirks et démarrer vos documents correctement.
La déclaration <!DOCTYPE> est la toute première ligne d'un document HTML. Elle indique au navigateur la version de HTML dans laquelle la page est écrite et — plus important aujourd'hui — que la page doit être rendue en respectant les standards du web. Ce n'est pas une balise HTML ; c'est une instruction destinée au navigateur.
Cette page couvre le seul doctype à utiliser, pourquoi il est important (mode Standards vs. mode Quirks), et une brève note sur les doctypes hérités que vous pouvez encore rencontrer dans d'anciens codes.
Le Doctype à Utiliser
Pour chaque nouveau document HTML, utilisez cette seule ligne, exactement comme suit :
<!DOCTYPE html>C'est le doctype HTML5 complet. Quelques règles :
- Il doit être la première chose dans le document, avant la balise
<html>et avant tout autre contenu (même avant un commentaire ou une ligne vide, par précaution). - Il n'est pas sensible à la casse —
<!DOCTYPE html>,<!doctype html>et<!Doctype HTML>sont tous valides. La forme minuscule<!doctype html>est courante, mais la convention ci-dessus est la plus utilisée. - Il n'y a pas de balise de fermeture.
Un document minimal et complet ressemble à ceci :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title of the document</title>
</head>
<body>
<h2>Elements example</h2>
<p>This is some paragraph.</p>
<p>This is another paragraph <br /> with a line break.</p>
</body>
</html>Pour apprendre ce qui va à l'intérieur du document après le doctype, consultez les balises HTML de base, la balise <html> et la balise <head>.
Pourquoi le Doctype est Important : Mode Standards vs. Mode Quirks
Lorsqu'un navigateur analyse une page, il choisit l'un de deux modes de rendu :
- Mode Standards — le navigateur suit les spécifications modernes de W3C/WHATWG. C'est ce que vous souhaitez. La mise en page, le modèle de boîte et CSS se comportent de manière cohérente entre les navigateurs.
- Mode Quirks — le navigateur émule le comportement bogué des navigateurs de la fin des années 1990 (comme Internet Explorer 5) pour éviter que les très anciennes pages ne cassent. Ce mode est déclenché lorsque le doctype est absent, malformé, ou ancien/inconnu.
Un <!DOCTYPE html> correct est ce qui fait basculer le navigateur en mode Standards. Omettez-le et vous optez pour le mode Quirks, où plusieurs choses changent de façon surprenante :
- Le modèle de boîte est cassé. En mode Quirks,
widthetheightincluent le rembourrage et les bordures (l'ancien modèle de boîte d'IE), ainsi une boîte dimensionnée à200pxpeut s'afficher plus large ou plus étroite que prévu. line-height,vertical-alignet l'espacement des éléments en ligne se comportent différemment, produisant souvent des espaces supplémentaires autour des images et des cellules de tableau.- Les unités CSS et les pourcentages peuvent être hérités et calculés de manière incohérente.
Ces bugs sont difficiles à diagnostiquer parce que votre CSS semble correct — c'est le mode qui est erroné. Ajouter le doctype est la solution, c'est pourquoi tout document moderne devrait commencer par lui.
document.compatMode dans la console : "CSS1Compat" signifie mode Standards, "BackCompat" signifie mode Quirks.Note sur les Doctypes Hérités
Avant HTML5, le doctype référençait une Définition de Type de Document (DTD) — une grammaire formelle décrivant quels éléments et attributs étaient autorisés. Ces déclarations étaient longues et faciles à mal écrire, par exemple HTML 4.01 Strict :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">HTML 4.01 existait en versions Strict, Transitional et Frameset, et XHTML 1.0 / 1.1 en ajoutait plusieurs autres (comme "-//W3C//DTD XHTML 1.0 Strict//EN"). Vous pouvez encore les rencontrer dans d'anciens codes.
Ce qu'il faut retenir : HTML5 les a tous remplacés par le court <!DOCTYPE html>. C'est le doctype valide le plus court qui déclenche de manière fiable le mode Standards, et c'est le seul que vous devez écrire aujourd'hui.