Runnable HTML Docs: Doctype

Q: Is the doctype case sensitive?

No. , and all mean the same thing. Uppercase DOCTYPE with lowercase html is the most common style.

Q: How do I check if a page is in quirks mode?

Open the browser console and run document.compatMode. "CSS1Compat" means standards mode (or limited quirks mode), "BackCompat" means quirks mode.

What `<!DOCTYPE html>` is

<!DOCTYPE html> is the doctype declaration: the first line of an HTML file, before the <html> tag. It tells the browser "this is a modern HTML document", and the browser responds by rendering the page in standards mode, following the current HTML and CSS specifications.

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

That one line is the entire HTML5 doctype. It has no closing tag and nothing else goes inside it.

Syntax rules

It comes first. Only whitespace and comments may appear before it. Any text or tag before the doctype makes the browser ignore it.
It is case insensitive. <!DOCTYPE html> and <!doctype html> are identical. Pick one style and keep it.
It is not an element. There is no </!DOCTYPE>, and you cannot add a class or other attributes to it.
The word after DOCTYPE must be html. <!DOCTYPE html5> is not a newer version; the browser treats that page as having no valid doctype.
One per document. Pages built from several files (templates, includes) still output a single doctype at the top of the final HTML.

Standards mode and quirks mode

Browsers have three rendering modes, and the doctype picks one:

Mode	Triggered by	What changes
Standards mode	`<!DOCTYPE html>` and other modern doctypes	Everything follows the current specifications
Limited quirks mode	HTML 4.01 Transitional or Frameset with a URL, XHTML 1.0 Transitional or Frameset	Almost standards: only one line height rule differs, so an image alone on a line (typically in a table cell) has no gap below it
Quirks mode	No doctype, a misspelled one, or some old ones such as HTML 4.01 Transitional without a URL	Imitates 1990s browsers: percentage heights, table text size and line heights behave differently

Quirks mode exists so that pages written before web standards still look the way their authors saw them. For new pages it only causes trouble: a height: 100% that works on one page and not another, or tables that ignore your font size, are classic symptoms of a missing doctype.

The editor previews on this page always render in standards mode, so deleting a doctype there will not show you quirks mode. The checker below uses DOMParser, which applies the same rules browsers use when they load a file. Edit the doctype in the text box and the mode updates:

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

Try deleting the line, typing <!DOCTYPE html5>, or putting a word before the doctype: each one switches the result to quirks.

Old doctypes: HTML 4.01 and XHTML

Before HTML5, a doctype named a DTD file with a long public identifier. You will still find these at the top of older sites:

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

Browsers never downloaded those DTD files. They only read the identifier to choose a mode: HTML 4.01 Strict and XHTML 1.0 Strict give standards mode, the Transitional versions give limited quirks mode, and HTML 4.01 Transitional without the URL gives full quirks mode. Paste one into the checker above to test it; note that compatMode reports limited quirks mode as CSS1Compat, the same value as standards mode, so only full quirks mode shows up as BackCompat.

Replacing an old doctype with <!DOCTYPE html> is safe for pages already in standards mode. A page that was in quirks mode can shift slightly (usually heights and gaps under images), so look it over after the change.

The doctype in the DOM

The doctype becomes a DocumentType node, separate from the <html> element. Scripts read it through document.doctype, and document.compatMode reports the mode the page ended up in:

<!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 is the quickest way to check any live site: open the browser console and type it. "CSS1Compat" means standards (or limited quirks) mode, "BackCompat" means quirks mode.

A complete HTML5 starter

The doctype is one part of the minimal document every page should start from. Each line below has a job:

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

The lang attribute and the meta viewport tag each have their own page.

Common mistakes

Something before the doctype. A stray character, a debug echo from a server script, or an HTML tag above <!DOCTYPE html> puts the whole page in quirks mode. Comments and blank lines are fine.
Inventing a version. <!DOCTYPE html5> or <!DOCTYPE HTML 5> are not valid and trigger quirks mode. The HTML5 doctype is just <!DOCTYPE html>.
Closing it. <!DOCTYPE html></!DOCTYPE> is not valid HTML. The declaration has no end tag.
Leaving it out of small test files. Layout bugs you chase in a scratch file without a doctype may not exist in the real page, and the reverse.
Keeping an old Transitional doctype. It puts the page in limited quirks mode for no benefit. Switch to <!DOCTYPE html>.

Frequently Asked Questions

What does <!DOCTYPE html> do?

It tells the browser the page is a modern HTML document, so it renders in standards mode. Without it, browsers fall back to quirks mode, which imitates bugs from browsers of the late 1990s and changes how some layouts and heights are calculated.

Is <!DOCTYPE html> required?

The page still loads without it, but the HTML standard requires it and browsers render the page in quirks mode. Always put <!DOCTYPE html> on the first line.

Is the doctype case sensitive?

No. <!DOCTYPE html>, <!doctype html> and <!DocType HTML> all mean the same thing. Uppercase DOCTYPE with lowercase html is the most common style.

Is DOCTYPE an HTML tag?

No. It is a declaration, not an element: it has no closing tag, no attributes you can add, and it does not appear in document.body. In the DOM it is a separate DocumentType node available as document.doctype.

What is the doctype for HTML5?

<!DOCTYPE html>. HTML5 dropped the long public identifiers and URLs of HTML 4.01 and XHTML, and the short form is the only doctype you need for any new page.

How do I check if a page is in quirks mode?

Open the browser console and run document.compatMode. "CSS1Compat" means standards mode (or limited quirks mode), "BackCompat" means quirks mode.

Related concepts