What does a doctype do?
TL;DR
<!doctype html> is the required preamble for an HTML document. Its practical purpose in modern browsers is to select no-quirks mode so layout follows current web standards. It is not an HTML element, does not select an “HTML5 feature set,” and—unlike historical doctypes—does not reference a DTD.
<!doctype html><html lang="en"><!-- Document content --></html>
What does a doctype do?
Browsers retain legacy rendering modes for compatibility with pages written around old browser behavior. A recognized modern doctype tells the browser to use no-quirks mode.
Rendering modes
- No-quirks mode follows current HTML and CSS behavior.
- Quirks mode emulates several legacy layout behaviors, including differences in the CSS box model.
- Limited-quirks mode preserves a smaller set of legacy behaviors and can be triggered by certain historical doctypes.
The modern declaration is deliberately short and case-insensitive:
<!doctype html>
Place it before the <html> element. A missing or malformed declaration can put the document into quirks mode, producing layout differences that are difficult to diagnose.
Historical DTDs
Older HTML and XHTML doctypes sometimes included a public identifier and a DTD URL. The HTML Living Standard's doctype does not. Content-model rules—such as which elements may contain other elements—come from the HTML specification and are not selected at runtime by this declaration.
When debugging an old page, inspect the document mode in DevTools or check it directly:
console.log(document.compatMode);// "CSS1Compat" in no-quirks mode; "BackCompat" in quirks mode.