Curriculum ▸ HTML Zero → Mastery ▸ Lesson 7: The <!DOCTYPE html> Declaration Foundations

Lesson 7 — The <!DOCTYPE html> Declaration Standards vs Quirks

Estimated time: 25–40 minutes · You’ll see how a single line controls the browser’s rendering mode

Learning Goals

Validate this page

Part 1 — What is <!DOCTYPE html>?

The DOCTYPE is an instruction to the browser telling it to use modern standards when interpreting your HTML and CSS. In modern HTML, it’s always the short, simple form: 

<!DOCTYPE html>
Place it as the very first line in your HTML file—no blank lines above it.

Part 2 — Rendering Modes

Modern goal

  • Standards Mode — consistent, spec-compliant behavior.
  • Almost Standards — nearly identical; a historic table-cells quirk.
  • Quirks Mode — legacy behavior emulating very old browsers.

How the browser decides

  • Valid modern DOCTYPE → Standards (or Almost Standards).
  • Missing/legacy/malformed DOCTYPE → Quirks Mode.

You almost never want Quirks Mode in new projects.

Part 3 — Detecting the Mode

Open DevTools Console and run:

document.compatMode  // 'CSS1Compat' = Standards; 'BackCompat' = Quirks
Where to find this in DevTools?
  • Open DevTools (Right-click → Inspect).
  • Go to Console and type the command above.
  • On the Elements panel, if you see a DOCTYPE at the top, you’re likely in Standards Mode.
Live demo: With & Without DOCTYPE

With DOCTYPE (Standards)

Without DOCTYPE (Quirks)

Part 4 — Common Mistakes (and Fixes)

❌ Missing or malformed DOCTYPE

<html>
  <head>...</head>
  <body>...</body>
</html>

✅ Always start with

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

Part 5 — Step-by-Step: Fix an Old Page

  1. Open a file that’s missing a DOCTYPE.
  2. Add <!DOCTYPE html> as the first line.
  3. Reload and run document.compatMode again — expect CSS1Compat.
  4. Re-test layout in the browser; box model issues should vanish.

Practice Tasks

  1. Create lesson-07/index.html with and without DOCTYPE in two copies. Compare document.compatMode.
  2. Validate both files. What does the validator report?
  3. Try adding a blank line before DOCTYPE; check the mode again.

Quick Quiz

  1. What does the DOCTYPE do in modern HTML?
  2. How can you tell if you’re in Quirks Mode?
  3. Which values can document.compatMode return?
  4. Where should the DOCTYPE appear in an HTML file?
Sample answers
  • It signals the browser to use modern standards mode.
  • Check DevTools/Console: document.compatMode returns BackCompat; missing DOCTYPE in Elements.
  • CSS1Compat (Standards/Almost Standards) or BackCompat (Quirks).
  • As the very first line—no blank lines before it.

Lesson 7 Dictionary

Terms introduced or emphasized in this lesson.

Almost Standards Mode
A near-standards rendering mode with minor legacy behavior (rarely impacts modern layouts).
BackCompat
The string returned by document.compatMode when the page is in Quirks Mode.
CSS1Compat
The string returned by document.compatMode in Standards/Almost Standards Mode.
document.compatMode
Read-only property indicating the current rendering mode: CSS1Compat or BackCompat.
Quirks Mode
Legacy rendering mode emulating old browsers; triggered by missing/invalid DOCTYPE.
Rendering Mode
The browser’s chosen behavior profile (Standards, Almost Standards, or Quirks) for the current page.
Standards Mode
Spec-compliant mode used by modern browsers when a valid DOCTYPE is present.
<!DOCTYPE html>
The modern DOCTYPE that triggers Standards Mode; always the first line of the document.