Suggest an edit

Improve this article

Refine the answer for “What is doctype in HTML”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**DOCTYPE** is a browser instruction placed at the very first byte of an HTML file that switches the rendering engine into standards mode.

## Theory

### TL;DR

- DOCTYPE is like a voltage label on a power cord: it tells the browser "use modern HTML5 rules", not 1998 IE5 behavior.
- Without it: quirks mode, where padding adds *outside* declared widths instead of inside.
- With it: standards mode, CSS box model follows W3C specs exactly.
- HTML5 shortened it to `<!DOCTYPE html>` — no DTD URL, no version number.
- One rule: DOCTYPE goes first. Nothing before it, ever.

### Quick example

```html

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div { height: 100px; border: 1px solid; }
  </style>
</head>
<body>
  <div>Height is exactly 100px across all browsers</div>
</body>
</html>

<html>
<head>
  <style>
    div { height: 100px; border: 1px solid; }
  </style>
</head>
<body>
  <div>Height may be 116px in some browsers</div>
</body>
</html>
```

The first snippet renders identically in Chrome, Firefox, and Safari. The second behaves differently depending on each browser's built-in compatibility shims.

### Key difference

Standards mode tells the browser to follow W3C specs for the CSS box model: `width` is the content width, and padding/border fit inside that number. Quirks mode reverts to the pre-1998 interpretation where padding and borders add *outside* the declared dimension. A `div` with `width: 100px` and `padding: 10px` becomes 120px wide in quirks mode. That one behavior difference was the source of most cross-browser layout bugs from the IE5 and Netscape era.

### When to use

- New HTML5 page: `<!DOCTYPE html>` always.
- Maintaining a legacy HTML4 doc: `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">` — migrate to HTML5 when possible.
- XHTML (obsolete): `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">` — not worth starting new projects with.
- HTML emails (Outlook): no DOCTYPE. Email clients expect quirks mode.

### Rendering modes

| Mode | What it means |
|---|---|
| Standards Mode | Browser follows W3C specs strictly |
| Quirks Mode | Browser emulates IE5/Netscape behavior |
| Almost Standards Mode | Minor quirks only for table cell sizing |

### How the browser handles DOCTYPE

When the HTML parser (Blink in Chrome, Gecko in Firefox) reads the first token, it checks for `<!DOCTYPE html>`. If it matches exactly — case-insensitive — it sets standards mode before even parsing `<html>`. The whole check takes about 1ms. Any content before DOCTYPE, including a comment or a blank line, permanently locks the browser into quirks mode.

### Common mistakes

**Placing DOCTYPE after a comment or `<html>`**

```html


<!DOCTYPE html>
<html>
```

Fix: DOCTYPE must be byte 1 of the file. Nothing before it.

**Forgetting DOCTYPE in server-rendered HTML**

Express with EJS or Pug, Next.js `_document.js`, React's `public/index.html` — all need DOCTYPE. Without it, CSS-in-JS libraries like styled-components and Emotion produce misaligned flex and grid layouts.

```js
// BROKEN: response renders in quirks mode
res.send('<html><body>...</body></html>');

// CORRECT
res.send('<!DOCTYPE html><html><body>...</body></html>');
```

**Using HTML4 DOCTYPE with HTML5 CSS**

HTML4 DOCTYPE triggers almost-standards mode in some browsers. Vertical alignment in table cells shifts by 2px. Not obvious. Hard to trace.

**Minifier removing the space**

```html

<!DOCTYPEhtml><html>

<!DOCTYPE html><html>
```

### Real-world usage

- React: every `public/index.html` from Create React App starts with `<!DOCTYPE html>`.
- Next.js: `_document.js` enforces DOCTYPE for consistent SSR hydration matching the client.
- AMP pages: Google validation requires `<!doctype html>` with strict schema.
- Service workers: if you intercept HTML responses, prepend DOCTYPE in the rewritten body. You cannot change rendering mode after parsing starts.

### Follow-up questions

**Q:** What happens when DOCTYPE is missing?
**A:** The browser enters quirks mode and emulates IE5 box model behavior. Padding adds outside declared widths, margins differ between browsers, and CSS Grid/Flexbox behave inconsistently.

**Q:** Does capitalization matter?
**A:** No. `<!DOCTYPE html>`, `<!doctype html>`, and `<!Doctype HTML>` all work per the HTML5 spec. Convention is lowercase `html`.

**Q:** What is Almost Standards Mode?
**A:** A third mode triggered by some older HTML4/XHTML doctypes. It mostly follows W3C specs but applies quirky behavior specifically to table cell sizing. With `<!DOCTYPE html>` you will not run into it.

**Q:** Can you force standards mode from JavaScript after the page loads?
**A:** No. DOCTYPE must be the first token the parser reads. If it is missing, rendering mode cannot be changed at runtime. In a service worker intercepting HTML responses, you can rewrite the response body to prepend `<!DOCTYPE html>` before the browser parses it. That is the only way.

## Examples

### Basic HTML5 page structure

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Page Title</title>
  </head>
  <body>
    <main>
      <h1>Content</h1>
    </main>
  </body>
</html>
```

This is the minimum correct structure. DOCTYPE is first. The `lang` attribute helps screen readers and SEO. `charset` and `viewport` go in `<head>` before anything else.

### DOCTYPE in a React app (Create React App template)

```html



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <noscript>Enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
```

Without DOCTYPE here, React portals can misalign and CSS-in-JS libraries produce slightly different box dimensions in Firefox vs Chrome. I once spent two hours chasing a 4px off-by-one inside a flex container, only to find the `public/index.html` had DOCTYPE stripped by a custom build script.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts961 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.