What is doctype in HTML

HTML & CSS~4 min read

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

<!-- WITH DOCTYPE: standards mode -->
<!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>

<!-- WITHOUT DOCTYPE: quirks mode -->
<!-- Same CSS, but some browsers add 16px+ due to legacy box model -->
<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.

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

<!-- BROKEN: parser locks quirks mode before reaching DOCTYPE -->
<!-- some comment -->
<!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.

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

<!-- WRONG: Firefox 120+ may quirk on this -->
<!DOCTYPEhtml><html>

<!-- CORRECT: space is required by the HTML5 spec -->
<!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

<!-- public/index.html -->
<!-- DOCTYPE ensures styled-components and Tailwind calculate box sizes -->
<!-- consistently across Chrome, Firefox, and Safari -->
<!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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?