HTML Guides for doctype
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
When a browser encounters a document, the doctype declaration is the first thing it reads to determine which rendering mode to use. There are three modes: quirks mode, almost standards mode, and full standards mode. Almost standards mode was introduced as a transitional step — it renders pages mostly according to standards but retains a few legacy behaviors, particularly around how images inside table cells are laid out. Doctypes that trigger this mode include:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
These doctypes were common during the XHTML and HTML 4 era but are now considered obsolete. The W3C HTML Validator (Nu HTML Checker) is designed for HTML5 documents and expects the simple <!DOCTYPE html> declaration.
Why this matters
- Standards compliance: The HTML Living Standard (maintained by WHATWG) specifies <!DOCTYPE html> as the only valid doctype. Using anything else means your document does not conform to the current standard.
- Rendering consistency: While almost standards mode is close to full standards mode, the subtle differences — especially around vertical sizing of table cell images — can lead to unexpected layout behavior across browsers.
- Future-proofing: Legacy doctypes tie your pages to outdated specifications. Modern tooling, linters, and validators all expect HTML5, and maintaining an old doctype can mask other issues.
- Simplicity: The HTML5 doctype is short, easy to remember, and case-insensitive. There’s no reason to use a longer, more complex declaration.
How to fix it
Replace the legacy doctype on the very first line of your HTML document with <!DOCTYPE html>. No public identifier, no system identifier, and no DTD URL is needed. After making the change, review your page for any layout shifts — in most cases there will be none, but pages that relied on the subtle almost-standards-mode behavior around images in table cells may need a small CSS adjustment (such as setting img { display: block; } or img { vertical-align: bottom; } on affected images).
Examples
❌ Legacy doctype triggering almost standards mode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
❌ HTML 4.01 Transitional doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
✅ Correct HTML5 doctype
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
The HTML5 doctype is the shortest possible doctype that triggers full standards mode in all modern browsers. It works regardless of case (<!DOCTYPE html>, <!doctype html>, or <!Doctype Html> are all equivalent), though lowercase or the conventional mixed-case form shown above is recommended for consistency.
Every HTML document must begin with a Document Type Declaration (doctype). The doctype tells browsers which version and standard of HTML the document uses, ensuring they render the page in standards mode rather than quirks mode. Without it, browsers fall back to quirks mode, which emulates legacy rendering behavior from the early web — leading to inconsistent layouts, unexpected CSS behavior, and subtle bugs that differ across browsers.
Since HTML5, the doctype is simply <!DOCTYPE html>. It is case-insensitive (<!doctype html> also works), but it must appear before any other content in the document, including the <html> tag. Even a blank line or whitespace before the doctype can sometimes cause issues in older browsers.
This error can be triggered by several common scenarios:
- The doctype is completely missing. The file jumps straight into <html> or other markup.
- The doctype is misspelled. For example, <!DOCKTYPE html> or <!DOCTYPE hmtl>.
- The file is empty or contains only non-HTML content. The validator reached the end without finding any valid HTML structure.
- A Byte Order Mark (BOM) or invisible characters appear before the doctype, which can happen when files are saved with certain text editors.
- The doctype is placed after other elements, such as a comment or <html> tag.
To fix this, ensure <!DOCTYPE html> is the very first line of your file, with no preceding content.
Examples
❌ Missing doctype entirely
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
This triggers the error because the validator never encounters a doctype declaration.
❌ Misspelled doctype
<!DOCKTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
The typo DOCKTYPE means the validator does not recognize it as a valid doctype.
❌ Doctype placed after the <html> tag
<html lang="en">
<!DOCTYPE html>
<head>
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
The doctype must come before the <html> tag, not after it.
✅ Correct minimal HTML5 document
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
The <!DOCTYPE html> declaration appears on the very first line, followed by the <html> tag with a lang attribute, a <head> containing a <title>, and a <body> with the page content. This is the minimal structure for a valid HTML5 document.
The <!DOCTYPE html> declaration is required by the HTML specification as the first non-whitespace content in any HTML document. It instructs the browser to render the page in standards mode, which means the browser follows modern CSS and HTML specifications faithfully. When the doctype is missing or preceded by other content, browsers fall back to quirks mode — a legacy rendering mode that emulates old browser behaviors and can cause inconsistent layout, box model differences, and other subtle bugs across browsers.
This error is triggered in several common scenarios:
- The <!DOCTYPE html> declaration is completely absent from the file.
- Text, HTML tags, or other non-space characters appear before the doctype.
- A Byte Order Mark (BOM) or invisible characters were inadvertently inserted before the doctype by a text editor.
- Server-side code (such as PHP or template includes) outputs content before the doctype.
- An XML processing instruction like <?xml version="1.0"?> precedes the doctype (this is unnecessary in HTML5).
Beyond triggering quirks mode, a missing or misplaced doctype breaks standards compliance and can cause real-world rendering issues. For example, in quirks mode, box-sizing defaults differ, table elements don’t inherit font sizes properly, and percentage-based heights may not resolve correctly. These problems can be difficult to debug because they only manifest in certain browsers or under specific conditions.
How to Fix
- Open your HTML file and make sure the very first line is <!DOCTYPE html> with nothing before it — no whitespace characters, no text, no comments, and no BOM.
- Check for invisible characters. If you copied content from another source or use a text editor that inserts a BOM, open the file in a hex editor or use your editor’s “show invisible characters” feature to confirm nothing precedes the doctype.
- Check server-side scripts. If you use PHP, ASP, or a templating engine, make sure no output (including blank lines or spaces outside script tags) is emitted before <!DOCTYPE html>.
- Remove legacy doctypes or XML declarations. In HTML5, the only doctype you need is <!DOCTYPE html>. Older doctypes like <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...> are valid but unnecessary, and XML processing instructions should not be used in HTML documents.
Examples
Missing doctype
This document has no doctype at all, which triggers the error:
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Text before the doctype
Stray text or content before the declaration also triggers the error:
Welcome to my site!
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
PHP output before the doctype
A common server-side issue where whitespace or output leaks before the doctype:
<?php include 'config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
If config.php has a closing ?> followed by a blank line, that blank line gets sent as output before the doctype. Ensure included files don’t produce unintended output.
Correct document
The doctype must be the absolute first thing in the file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Note that the doctype declaration is case-insensitive — <!DOCTYPE html>, <!doctype html>, and <!Doctype Html> are all valid. However, <!DOCTYPE html> is the conventional form recommended by the HTML living standard. A single blank line or whitespace-only line before the doctype won’t trigger this specific error (since the validator message specifies “non-space characters”), but it’s best practice to avoid any content before the declaration to keep your document clean and unambiguous.
The doctype declaration tells the browser which version of HTML the document is written in and determines how the browser renders the page. Older HTML versions required long, complex doctype strings that referenced Document Type Definitions (DTDs). With the introduction of HTML5, the doctype was simplified to just <!DOCTYPE html>, which is now the only recommended doctype for modern web pages.
When a browser encounters an obsolete doctype—or no doctype at all—it may switch into “quirks mode,” a legacy rendering mode that emulates old browser behavior. In quirks mode, CSS box models, layout calculations, and other rendering behaviors can differ significantly from standards mode, leading to inconsistent appearance across browsers. Using the modern <!DOCTYPE html> ensures the browser operates in “standards mode,” giving you predictable and consistent rendering.
Beyond rendering concerns, using an obsolete doctype means your document is referencing outdated specifications. Modern HTML validators, including the W3C Nu HTML Checker, are designed to validate against the current HTML Living Standard. Legacy doctypes may cause the validator to misinterpret your markup or report errors that don’t apply, making it harder to maintain clean, valid code.
To fix this, simply replace whatever doctype declaration appears at the top of your HTML file with <!DOCTYPE html>. This single change is backward-compatible—it works in all modern browsers and even in Internet Explorer 6 and later. No DTD reference or version number is needed.
Examples
Obsolete doctypes that trigger this issue
These are common legacy doctypes that the validator will flag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Page</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
Correct HTML5 doctype
Replace the obsolete doctype with the simple, modern declaration:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
Key points about the modern doctype
- It must appear on the very first line of the document, before the <html> tag. No comments or whitespace should precede it.
- The declaration is case-insensitive—<!DOCTYPE html>, <!doctype html>, and <!Doctype Html> are all valid, though lowercase or uppercase conventions are most common.
- Unlike older doctypes, it does not reference a DTD URL or version number.
- Adding a lang attribute to the <html> element and a <meta charset="utf-8"> tag in the <head> are best practices that pair well with the modern doctype for a fully standards-compliant document.
The doctype declaration tells browsers which version of HTML a page uses and, critically, determines whether the browser renders the page in standards mode or quirks mode. Standards mode follows current CSS and HTML specifications, while quirks mode emulates the buggy behavior of older browsers from the late 1990s and early 2000s. When the W3C validator reports “Quirky doctype,” it means your document’s doctype is one that is known to trigger quirks mode—and in the context of modern HTML, this is always undesirable.
Several legacy doctypes can trigger this warning, including:
- <!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN"> (without a system identifier URL)
- <!DOCTYPE html public "-//W3C//DTD HTML 3.2 Final//EN">
- Malformed or incomplete doctype declarations
- Doctypes with unexpected casing or extra whitespace in certain positions
The HTML Living Standard (maintained by WHATWG) specifies that the doctype must be <!DOCTYPE html>. This short declaration is case-insensitive but is conventionally written in uppercase. It exists solely to trigger standards mode—it does not reference a DTD because HTML5 is not based on SGML.
Why This Matters
Inconsistent rendering: In quirks mode, browsers alter how they calculate the box model, handle table sizing, apply inline element dimensions, and more. A page that looks correct in one browser may break in another because each browser’s quirks mode emulates different legacy behaviors.
Accessibility and interoperability: Screen readers and other assistive technologies rely on predictable DOM behavior. Quirks mode can cause unexpected layout shifts and content reflow that degrade the experience for users of assistive technology.
Standards compliance: Modern HTML validators expect the HTML5 doctype. Using a legacy doctype signals that the document is not following current web standards, which can also affect SEO tools and automated audits.
How to Fix It
- Open your HTML file and locate the very first line.
- Replace whatever doctype declaration is there with <!DOCTYPE html>.
- Ensure nothing appears before the doctype—no whitespace, no comments, no byte order marks (BOMs). Any content before the doctype can also trigger quirks mode in some browsers.
- Verify that the rest of your document uses valid HTML5 syntax (e.g., the <html> tag includes a lang attribute, the <head> contains a <meta charset> declaration and a <title> element).
Examples
Incorrect: Legacy doctype triggering quirks mode
<!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>This page renders in quirks mode.</p>
</body>
</html>
This HTML 4.0 Transitional doctype without a system identifier URL is a known quirks-mode trigger.
Incorrect: Another common quirky doctype
<!DOCTYPE html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>This older doctype also triggers quirks mode.</p>
</body>
</html>
Correct: Standard HTML5 doctype
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<p>This page renders in standards mode.</p>
</body>
</html>
The simple <!DOCTYPE html> declaration ensures standards mode across all modern browsers. It is the only doctype you should use for new HTML documents, and it is also fully backward-compatible with older browsers—even Internet Explorer 6 renders in standards mode with this doctype.
The Document Type Declaration (commonly called the “doctype”) tells browsers which version and rules of HTML the document follows. In modern HTML5, the doctype is simply <!DOCTYPE html>. It must be the very first thing in the document — before the <html> tag, before any whitespace-generating content, and before any other elements. The only thing permitted before it is an optional BOM (byte order mark) or whitespace characters.
Without a doctype, browsers fall back to quirks mode, a legacy rendering mode that emulates old, inconsistent browser behavior. In quirks mode, the CSS box model, table sizing, font inheritance, and many other layout behaviors work differently than in standards mode. This can cause your page to render inconsistently across browsers and lead to hard-to-debug visual issues. Including the doctype ensures the browser uses standards mode, giving you predictable, spec-compliant rendering.
This error commonly occurs for a few reasons:
- The doctype was simply forgotten or accidentally deleted.
- There is content before the doctype, such as an XML declaration (<?xml version="1.0"?>), a comment, or a server-side include.
- The doctype is misspelled or uses an older, incorrect format.
- The file contains a BOM or invisible characters before the doctype that shift it out of position (though the validator may report this differently).
The doctype declaration is case-insensitive — <!DOCTYPE html>, <!doctype html>, and <!Doctype Html> are all valid — but the lowercase-uppercase convention <!DOCTYPE html> is the most widely used.
Examples
❌ Missing doctype entirely
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
The validator sees the <html> start tag but no doctype has appeared yet, triggering the error.
❌ Content before the doctype
<!-- This is my website -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Even an HTML comment placed before the doctype can trigger this warning, because the parser encounters non-doctype content first.
❌ Old or malformed doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
While older doctypes like HTML 4.01 may not always produce this exact error, they can trigger related warnings. The HTML5 doctype is the recommended standard for all new documents.
✅ Correct: doctype as the first line
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
The <!DOCTYPE html> appears first, followed by the <html> tag with a lang attribute, a <head> with a required <title>, and the <body>. This is a minimal, fully valid HTML5 document.
✅ Correct: fragment with doctype added
If you were previously only writing a fragment like <div><p>Hello</p></div>, wrap it in a proper document structure:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Fragment</title>
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
</html>
Always ensure <!DOCTYPE html> is the absolute first thing in every HTML file you create. It’s a one-line addition that guarantees standards-mode rendering and keeps your document valid.
The <!DOCTYPE> declaration tells the browser which version and type of HTML the document uses. In HTML5, this is simply <!DOCTYPE html>. According to the HTML specification, the DOCTYPE must be the first thing in the document — before any elements, comments, or whitespace. There can also be only one DOCTYPE per document.
The W3C validator reports “Stray doctype” when it encounters a <!DOCTYPE> declaration in an unexpected location. This typically happens when:
- The DOCTYPE is accidentally duplicated somewhere in the document (e.g., inside the <head> or <body>).
- Multiple HTML documents have been inadvertently concatenated or pasted together.
- A template engine or build tool is injecting an extra DOCTYPE.
- The DOCTYPE was mistakenly placed after other content, such as a comment, whitespace from a BOM (byte order mark), or a stray character before it.
This matters because a misplaced DOCTYPE can force the browser into quirks mode, which causes it to emulate legacy rendering behavior. In quirks mode, CSS box model calculations, font sizing, and many other layout behaviors differ from standards mode, leading to unpredictable and inconsistent rendering across browsers. A stray DOCTYPE inside the document body is simply ignored, but it signals a structural problem that can also cause accessibility tools and parsers to behave unexpectedly.
To fix the issue:
- Search your document for all occurrences of <!DOCTYPE and remove any duplicates.
- Make sure the single remaining <!DOCTYPE html> is the absolute first thing in the file — no whitespace, no comments, no BOM characters before it.
- If you’re using templates or server-side includes, check that only one template is responsible for outputting the DOCTYPE.
Examples
❌ Incorrect: DOCTYPE duplicated inside the body
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<!DOCTYPE html>
<p>Hello, world!</p>
</body>
</html>
The second <!DOCTYPE html> inside the <body> is a stray doctype and will trigger the error.
❌ Incorrect: DOCTYPE appears after other content
<!-- This is my page -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Even a comment before the DOCTYPE can cause issues. The DOCTYPE must come first.
❌ Incorrect: Two documents concatenated together
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page One</title>
</head>
<body>
<p>First page content.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Two</title>
</head>
<body>
<p>Second page content.</p>
</body>
</html>
This often happens when templates are incorrectly assembled. The second DOCTYPE (and entire second document structure) is stray content.
✅ Correct: Single DOCTYPE at the very start
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
The <!DOCTYPE html> declaration appears exactly once, as the very first thing in the file, followed by the <html> element. This ensures the browser uses standards mode and the document is valid.
Validate at scale.
Ship accessible websites, faster.
Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.
Pro Trial
Full Pro access. Cancel anytime.
Start Pro Trial →Join teams across 40+ countries