When a browser loads an HTML document, one of the first things it does is inspect the very beginning of the file for a Document Type Declaration. Based on what it finds (or doesn't find), the browser chooses a rendering mode. The three modes are Standards Mode, Almost Standards Mode, and Quirks Mode. Standards Mode follows current CSS and HTML specifications closely. Quirks Mode emulates the buggy behavior of 1990s-era browsers, particularly Internet Explorer 5. Almost Standards Mode is identical to Standards Mode except for how it handles vertical sizing of table cells containing images.
The DOCTYPE is not an HTML element. It is an instruction to the browser's parser. In modern HTML5, it takes the simple form <!DOCTYPE html>. Older HTML 4.01 and XHTML 1.0 documents required longer declarations that referenced a Document Type Definition (DTD) URL. Today, the short HTML5 DOCTYPE is the recommended form for all new documents.
Why Quirks Mode and Document Type Declaration matters
Quirks Mode changes how browsers calculate the box model, handle table layout, inline element sizing, font inheritance, and many other CSS behaviors. These differences break predictable rendering. A page that looks correct in one browser may look wrong in another if Quirks Mode is active, because each browser's quirks emulation is slightly different.
For HTML validation, missing or malformed DOCTYPEs cause validators like the W3C Markup Validation Service to report errors or to be unable to determine which specification to validate against. Without knowing the document type, the validator cannot check whether the elements and attributes used are correct.
Accessibility is affected too. Screen readers and assistive technologies rely on a well-formed DOM to interpret page structure. Quirks Mode can alter how browsers construct the DOM. For example, implicit element closure rules change in Quirks Mode, which can cause elements to nest differently than the author intended. This means heading hierarchies, landmark regions, and ARIA relationships may not map correctly to the accessibility tree. Consistent Standards Mode rendering gives assistive technologies a predictable foundation.
Search engine crawlers also benefit from Standards Mode. Google's rendering engine processes pages as a modern browser would, and a missing DOCTYPE can lead to layout shifts that affect how content is indexed.
How Quirks Mode and Document Type Declaration works
Mode selection
Browsers use a "DOCTYPE sniffing" algorithm defined in the HTML specification. The algorithm checks the first bytes of the document for a DOCTYPE declaration and compares it against a list of known DTDs.
- If the document starts with
<!DOCTYPE html>, the browser uses Standards Mode. - If the document has no DOCTYPE at all, the browser uses Quirks Mode.
- If the document uses certain older DOCTYPEs (like HTML 4.01 Transitional without a system identifier), the browser uses Quirks Mode.
- If the document uses a full HTML 4.01 Strict DOCTYPE or XHTML 1.0 Strict DOCTYPE with a system identifier, the browser uses Standards Mode.
You can check which mode a browser is using by opening the developer console and typing document.compatMode. A return value of "CSS1Compat" means Standards Mode. "BackCompat" means Quirks Mode.
Box model differences
The most visible Quirks Mode change is the CSS box model. In Standards Mode, width and height set the size of the content area only; padding and border are added on top. In Quirks Mode, width and height include padding and border, similar to box-sizing: border-box. This means layout calculations produce different results depending on the rendering mode, and any CSS written for Standards Mode will render incorrectly in Quirks Mode.
Common triggers for Quirks Mode
Anything that appears before the DOCTYPE triggers Quirks Mode in some browsers. This includes:
- An XML declaration like
<?xml version="1.0" encoding="UTF-8"?>before the DOCTYPE (this triggered Quirks Mode in IE6). - HTML comments before the DOCTYPE.
- A byte order mark (BOM) or whitespace characters in some older parsers, though modern browsers are more tolerant of whitespace.
- A completely missing DOCTYPE line.
Interaction with HTML validation
Validators parse the DOCTYPE to determine the ruleset. The HTML5 DOCTYPE (<!DOCTYPE html>) tells the validator to check against the HTML Living Standard. If the DOCTYPE is missing, the validator may default to a permissive mode or report an error immediately. Either way, validation results become unreliable.
Code examples
A document missing the DOCTYPE triggers Quirks Mode:
<html>
<head>
<meta charset="utf-8">
<title>No DOCTYPE - Quirks Mode</title>
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid #333;
}
</style>
</head>
<body>
<div class="box">
<!-- In Quirks Mode, this box is 200px total including padding and border. -->
<!-- In Standards Mode, it would be 250px total. -->
Content here
</div>
</body>
</html>
The fix is to add the HTML5 DOCTYPE as the very first line:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>With DOCTYPE - Standards Mode</title>
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid #333;
}
</style>
</head>
<body>
<div class="box">
<!-- In Standards Mode, this box is 250px total (200 + 40 padding + 10 border). -->
Content here
</div>
</body>
</html>
Note the addition of lang="en" on the <html> element. While not related to the DOCTYPE itself, the lang attribute is required for valid, accessible HTML and is a common omission in documents that also lack a DOCTYPE.
Here is an example of a problematic older DOCTYPE that triggers Quirks Mode in most browsers because it lacks the system identifier URL:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Old Transitional DOCTYPE without system identifier</title>
</head>
<body>
<p>This page renders in Quirks Mode.</p>
</body>
</html>
The fix for legacy documents is to either switch to the HTML5 DOCTYPE or add the full system identifier:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Old Transitional DOCTYPE with system identifier</title>
</head>
<body>
<p>This page renders in Standards Mode (or Almost Standards Mode).</p>
</body>
</html>
For any new project, the simplest and most reliable approach is <!DOCTYPE html> on the first line, with nothing before it. This single line avoids Quirks Mode, satisfies HTML validators, and gives assistive technologies a consistent DOM to work with.
Related terms
Help us improve this glossary term
Scan your site
Rocket Validator scans thousands of pages in seconds, detecting accessibility and HTML issues across your entire site.