DocHero
Lesson 33 +10 XP

Quirks Mode and Standards Mode

Quirks Mode and Standards Mode

Browsers are very good at being fair. But sometimes old pages were built with bugs in mind... so browsers have special modes!

The problem

Long ago, browsers were buggy. Web pages were built to work around those bugs. If a modern browser displayed those pages perfectly, they'd break!

The two modes

  • Standards mode: the browser follows the rules properly. Modern, correct pages use this.
  • Quirks mode: the browser imitates old browser bugs. Used when the page is missing something.

How does the browser decide?

Look at the <!DOCTYPE html> line!

  • If a proper doctype is present → standards mode.
  • If the doctype is missing or wrong → quirks mode.
<!-- This is the magic line! -->
<!DOCTYPE html>

What changes between modes?

Layout quirks: box sizing, table spacing, and how heights/widths are calculated can behave differently. It can literally change how your page looks!

The moral

Always start every page with <!DOCTYPE html>. It's the first line, it's tiny, and it guarantees modern, predictable rendering.

TL;DR

  • Standards mode = correct rendering.
  • Quirks mode = imitates old browser bugs.
  • The doctype decides which mode.
  • Always write <!DOCTYPE html> first!