What does the line <!DOCTYPE html> at the top of an HTML file do, and what happens if you leave it out?
answer
- not a tag, a switch
- no DTD behind the modern one
- two layout personalities per browser
- missing it means legacy box model
- document.compatMode reports which
basics
~20 ssolid answer
~50 s`<!DOCTYPE html>` is not a tag and not a version declaration — it is a switch. Its only job is to tell the browser to render the document in **standards mode** (the spec calls it *no-quirks mode*) rather than **quirks mode**, which reproduces pre-standards browser behaviour so that ancient pages still look right. Unlike the old HTML 4.01 and XHTML 1.0 doctypes it points at no DTD, and nothing about it makes the browser validate your markup or parse it differently — the HTML parser is the same either way. Leave it out and you get quirks mode: `width` starts including padding and border, percentage heights resolve where they should not, and a handful of other legacy rules kick in. You can confirm which mode you got with `document.compatMode`, which returns `"CSS1Compat"` for standards and `"BackCompat"` for quirks.
go deeper
Be able to say the one line does one thing: it selects standards mode. Know that leaving it out gives quirks mode and that the most visible symptom is boxes sizing differently.
Explain that the doctype is a mode switch consumed by the parser, name the three modes, and describe the box-model difference concretely with numbers. Be ready to say what the doctype does not do — no validation, no parser change.
Show you can diagnose it in a running system: check document.compatMode, remember that mode is per document so iframes and injected fragments switch independently, and know which legacy behaviours quirks mode restores.
Frame it as backward-compatibility policy: browsers keep two layout engines forever because the web is append-only. Be ready to discuss the cost of that decision and how you would prevent quirks mode from reappearing in server-rendered or templated output.
## It is a mode switch, not a version tag `<!DOCTYPE html>` looks like markup but it is not an element: it has no content, no closing tag, and it never appears in the DOM as an element (it is exposed as `document.doctype`). It is a preamble the parser consumes before anything else, and in modern HTML its single purpose is to choose a **rendering mode**. The name is a leftover. In HTML 4.01 and XHTML 1.0 the doctype genuinely referenced a Document Type Definition — a grammar file: ```html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ``` Modern HTML is not defined by a DTD at all, so the doctype shrank to the shortest string browsers would still recognise as "this author knows about standards": ```html <!DOCTYPE html> ``` It is case-insensitive (`<!doctype html>` is identical) and must come before any content in the document. ## Why the switch exists at all When browsers began following the CSS specifications in the late 1990s, the web was already full of pages written against the *old* behaviour — especially a box model in which a declared `width` covered padding and border. Rendering those pages correctly would have broken them visually. So browsers kept both behaviours and used the doctype as the signal: a page that bothered to declare one was assumed to want the standards behaviour; a page with none was assumed to be legacy content. That compromise is permanent. Every browser still ships two layout personalities, and the doctype is how you pick. ## The three modes The HTML standard defines three: - **no-quirks mode** — everyday "standards mode". `<!DOCTYPE html>` (and the strict legacy doctypes) get you here. - **limited-quirks mode** — "almost standards mode", triggered by certain transitional legacy doctypes. Almost identical to no-quirks. - **quirks mode** — no doctype, a misspelled one, or one of an explicit list of very old public identifiers. Any XML document — real XHTML served as `application/xhtml+xml` — is always in no-quirks mode regardless of its doctype, because the doctype switch is an HTML-parser rule. ## What you actually lose in quirks mode The headline difference is the box model. In standards mode a declared `width` is the width of the content box, and padding and border are added on top. In quirks mode the declared `width` swallows padding and border, so a 300px-wide box with 20px padding is 300px wide overall instead of 340px. Every layout calculation in a stylesheet written for one model comes out wrong in the other. Beyond that, quirks mode resolves percentage heights against ancestors that standards mode considers auto-height, accepts CSS lengths written without a unit and hex colours written without a `#`, and changes how a line box containing only an image is sized. None of these are things you want; they exist purely to keep old pages alive. ## What the doctype does *not* do This is where interviews separate memorised answers from understood ones: - It does **not** validate your markup. Validation is something you run in a separate tool; browsers never refuse malformed HTML. - It does **not** select a parser or an HTML "version". There is one HTML parser, and it tokenises the same bytes the same way whether the doctype is present, absent, or from 1997. Only layout rules change. - It does **not** affect which CSS or JavaScript features exist. Grid, flexbox, custom properties and modern JS all work in quirks mode. The engine is not older; a small set of layout rules is. - It does **not** apply to the page's subframes. Mode is a per-document property, so an `<iframe>` whose own document lacks a doctype is in quirks mode even inside a standards-mode parent. ## Checking at runtime ```js document.compatMode; // "CSS1Compat" = standards, "BackCompat" = quirks ``` The odd name `CSS1Compat` is historical; it does not mean the page is limited to CSS1. Note that limited-quirks mode also reports `"CSS1Compat"`, so the property distinguishes quirks from everything else rather than telling you all three modes apart. ## What to do in practice Write `<!DOCTYPE html>` as the first line of every HTML document you author, including partials that a server assembles into a full page and any HTML you inject into an `<iframe>` or a standalone email preview. It costs fifteen characters and removes an entire class of "why is this box the wrong size" bugs.
- Does the doctype change how the browser parses your HTML?No. There is a single HTML parser and it tokenises the same bytes identically with or without a doctype — unclosed tags, implied elements and error recovery all behave the same. The doctype only sets the document's rendering mode, which affects layout rules, not tree construction. It also never validates: browsers happily render markup no validator would accept.
- Why does the modern doctype not include a DTD URL like the HTML 4.01 one did?Because HTML is no longer defined by a DTD. The old public and system identifiers described an SGML grammar; today's HTML has a prose specification and an explicitly defined parsing algorithm instead. Browsers never fetched those DTD URLs to render pages anyway — they only pattern-matched the identifier string to pick a mode — so the doctype was reduced to the shortest string that still triggers standards mode.
- If a standards-mode page embeds an iframe whose document has no doctype, what mode is the iframe in?Quirks mode. The rendering mode is a property of each document, not of the browsing context or the page as a whole, so the embedded document is switched independently by its own doctype. This is a common source of "the widget looks fine standalone but its boxes are the wrong size when embedded" — check `document.compatMode` inside the frame, not on the parent.
saying these in an interview costs you the question
- Says the doctype tells the browser which HTML version to parse
- Claims the doctype makes the browser validate the markup
- Thinks quirks mode disables modern CSS like flexbox or grid
- Believes the modern doctype still downloads a DTD file
- Assumes rendering mode is per page rather than per document