DOCTYPE Variants

Old DOCTYPEs named a document type definition (DTD) for validators, but browsers never read it. They use the DOCTYPE as a switch: a modern one selects standards mode, a missing or old one selects quirks mode, which emulates Netscape Navigator 4 and Internet Explorer 5 so old pages keep their layout. HTML5 chose the shortest string that triggers standards mode everywhere, case-insensitive.

DOCTYPEs and the rendering mode the HTML parser assigns
DOCTYPE	Year	Rendering mode
<!DOCTYPE html>	2008+	No-quirks (standards)
HTML 4.01 or XHTML 1.0 Strict; XHTML 1.1	1999-2001	No-quirks
XHTML 1.0 or HTML 4.01 (with DTD URL) Transitional/Frameset	1999-2000	Limited-quirks
HTML 4.01 Transitional/Frameset, no DTD URL	1999	Quirks
HTML 2.0 or 3.2; no DOCTYPE	1995-97	Quirks

Limited-quirks ("almost standards") mode keeps only two line-height quirks, which stop an image alone in a table cell from leaving a gap below it. Quirks mode adds more: <html> and <body> stretching to fill the viewport, table quirks, hex colors without # and lengths without units. document.compatMode reports "CSS1Compat" for standards and "BackCompat" for quirks.

A page without a DOCTYPE renders in quirks modeHTMLLive

<html>
<body style="font: 16px system-ui; margin: 12px">
  <div style="width: 300; background: #e3f2fd; border: 2px solid #1565c0">
    width: 300 (no unit) works
  </div>
  <script>document.body.append('document.compatMode = ' + document.compatMode);</script>
</body>
</html>

Browser output of Listing 2.52 — Browser output of 52

Any text before the DOCTYPE other than whitespace and comments, such as a stray character from a template, makes the parser miss it and drops the page into quirks mode.

MENU