What does <!DOCTYPE html> do?
Standards mode, not quirks.

It's the first line of every HTML file, and most people copy it without knowing what it does. The DOCTYPE tells the browser which rendering mode to use. Without it, the browser falls back to quirks mode — a compatibility mode from the 1990s where box model math, line heights, and layout behave differently. Your CSS will look wrong, and you won't know why.

Short answer: <!DOCTYPE html> puts the browser in standards mode. It's not an HTML tag — it's a declaration. It must be the very first thing in the document, before <html>. Omitting it triggers quirks mode, where the box model and other layout rules follow old-browser behavior. Always include it.

✅ Standards mode vs quirks mode

What actually changes.

Box model

In quirks mode, width can include padding and border (like box-sizing: border-box). In standards mode, width is content-only by default.

Line height

Quirks mode has different default line-height calculations. Text can render at unexpected heights.

Image inline gaps

Quirks mode may not reserve space for inline images the same way. Layout shifts.

CSS parsing

Some CSS properties and values are interpreted differently. Modern CSS may not apply as expected.

✅ Before and after

The same layout, two ways.

no-doctype.html

<html lang="en">
<head>
<meta charset="UTF-8">
<title>No DOCTYPE</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>

❌ Browser enters quirks mode.
❌ Box model includes padding/border in width.
❌ Some CSS is interpreted differently.
❌ Modern layouts look subtly wrong.

with-doctype.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>With DOCTYPE</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>

✅ Browser renders in standards mode.
✅ Box model follows the modern spec.
✅ CSS behaves as documented.
✅ Layout is predictable across browsers.

Don't confuse <!DOCTYPE html> with an HTML tag. It has no closing tag. It doesn't go inside <html>. It's a single declaration that tells the browser "this is an HTML5 document — render it in standards mode." Anything else — a missing DOCTYPE, an old XHTML DOCTYPE, a typo — sends the browser into a compatibility mode that breaks modern layout. If your CSS looks subtly wrong and you can't find the bug, check line one.

⚠️ Common mistakes

The DOCTYPE mistakes that cost real time.

1. Forgetting the DOCTYPE

The page still renders, but in quirks mode. Fix: add <!DOCTYPE html> as the first line.

2. Using the HTML4 DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> — old. Fix: the HTML5 short form only.

3. Putting whitespace before the DOCTYPE

A blank line or BOM before <!DOCTYPE html> can trigger quirks mode. Fix: DOCTYPE must be the absolute first thing.

4. Adding a closing tag

<!DOCTYPE html></!DOCTYPE> is wrong — the declaration has no closing tag. Fix: just the opening.

5. Putting the DOCTYPE inside <html>

It must come before <html>, not inside it. Fix: line 1.

6. Capitalization panic

<!doctype html> works — case-insensitive. Fix: pick a case and be consistent. DOCTYPE uppercase is convention.

7. Assuming the DOCTYPE fixes validation

It triggers standards mode, not validity. Fix: validate HTML separately (W3C validator, or lint).

8. Missing DOCTYPE in email templates

HTML email often omits it, causing inconsistent rendering in email clients. Fix: include it — many clients render better with it.

❓ Frequently asked

What does <!DOCTYPE html> do?

It tells the browser to render the page in standards mode. Without it, the browser falls back to quirks mode — a compatibility mode from the 1990s where the box model, line heights, and layout rules behave differently. The declaration must be the very first thing in the document, before the html tag. It has no closing tag. It is not an HTML element; it is a parser directive. Always include it.

What is quirks mode?

Quirks mode is a rendering mode browsers use when the DOCTYPE is missing or invalid. It mimics the behavior of old browsers from the 1990s for backward compatibility. The box model is different (width includes padding and border by default), line heights are calculated differently, and some CSS properties are interpreted differently. Modern layouts that rely on standard box model behavior will break in subtle ways. Standards mode is the default when a valid DOCTYPE is present.

Is <!DOCTYPE html> case-sensitive?

No. The HTML5 DOCTYPE is case-insensitive: <!DOCTYPE html>, <!doctype html>, <!DoCtYpE hTmL> all trigger standards mode. The convention is uppercase DOCTYPE and lowercase html, but it is not required. Older XHTML DOCTYPEs were longer and case-sensitive, but HTML5 simplified it to a single short form.

Do I need a DOCTYPE in HTML5?

Yes, always. HTML5 still requires the DOCTYPE declaration, even though the parser is more forgiving than HTML4. Without it, the browser enters quirks mode. The declaration is shorter than HTML4 — just <!DOCTYPE html> — but it is still required. Some browsers will infer standards mode from certain elements, but this is unreliable. Always include the DOCTYPE as the first line.