The Doctype (<!DOCTYPE html>)

Every HTML document you write should begin with one short, unassuming line: <!DOCTYPE html>. It looks trivial, but it has an outsized effect on how the entire page renders.

What the doctype actually does

The doctype is not an HTML tag or element — it's a special instruction to the browser that must appear before anything else in the file. Its one job is to tell the browser: "render this page using the modern, standards-compliant rules." Without it, some browsers fall back to a legacy compatibility mode.

HTML

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Quirks mode vs standards mode

Browsers actually support (at least) two different rendering modes, and the doctype decides which one applies to the whole page:

Mode	Triggered by	Behavior
Standards mode	A valid, modern doctype like <code><!DOCTYPE html></code>	CSS and layout follow current W3C/WHATWG specifications precisely
Quirks mode	A missing doctype, or a very old/incorrect one	The browser mimics bugs and inconsistencies from browsers of the late 1990s, for backward compatibility with very old pages
Almost standards mode	Certain older, valid-but-legacy doctypes	Standards mode with a small number of table-cell sizing quirks kept for compatibility

Quirks mode causes real bugs

In quirks mode, box-model calculations, table sizing, and even some CSS units can behave differently than the specification describes. A page that looks fine in one browser can shift or break in another purely because of a missing doctype — always include it.

Why HTML5's doctype is so short

Older HTML versions required a doctype that referenced a formal Document Type Definition (DTD) — a separate document defining exactly which tags and attributes were legal. These were long and easy to get wrong. Here's the HTML 4.01 Strict doctype, for comparison:

HTML

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

And the XHTML 1.0 Transitional doctype was similarly verbose:

HTML

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

HTML5 dropped the idea of validating against a formal DTD entirely. The doctype's only remaining job is to trigger standards mode, so it was simplified to the shortest string that reliably does that in every browser:

HTML

<!DOCTYPE html>

Case-insensitive, but lowercase is the convention

<!doctype html> works exactly the same as <!DOCTYPE html> — the parser doesn't care about case here. Most style guides and code formatters use the uppercase DOCTYPE shown throughout this series, but you may see the lowercase form in some codebases.

Common mistakes

Placing anything — even a blank line or a comment — before the doctype, which can cause some browsers to drop into quirks mode.
Forgetting the doctype entirely on hand-crafted pages or generated templates, which silently degrades rendering.
Copy-pasting an old HTML4/XHTML doctype into a new HTML5 project out of habit.

Let your editor handle it

This is exactly what Emmet's ! abbreviation (covered on the Editors & Tools page) generates automatically, along with the rest of the boilerplate — one more reason to use it.

One line, one job: trigger standards mode. Next, we'll zoom out and look at the complete anatomy of a valid HTML document — how the doctype, <html>, <head>, and <body> all fit together.