Why Must <!DOCTYPE html> Be the First Line? Complete Guide (2026)
Hi, I'm Saar - a software engineer, SEO specialist, and lecturer who loves building tools and teaching tech.
View author profile →What Is the HTML Doctype?
The HTML doctype is a single declaration, <!DOCTYPE html>, that must appear as the very first line of an HTML document, before the <html> tag. It tells the browser to render the page in standards mode using HTML5 rules. Without it, browsers fall back to quirks mode and emulate 1990s Internet Explorer behavior.
Key Facts (TL;DR)
- Syntax: <!DOCTYPE html> — case-insensitive, no DTD URL needed (HTML5 spec).
- Position: Must be the first line of the document, before any whitespace or comments.
- Detection: document.compatMode returns "CSS1Compat" in standards mode, "BackCompat" in quirks mode.
- Audit name: Automated audits flag this as "Page has the HTML doctype" under Best Practices.
- Without it: Quirks mode breaks the CSS box model, table layout, and several JS APIs.
- HTML 4 / XHTML: Required long DTD URLs; HTML5 simplified this to one short token.
Doctype Reference Table
Different doctype declarations trigger different rendering modes. The table below shows the common ones and what they do.
| Declaration | Mode Triggered | Standard / Year |
|---|---|---|
| <!DOCTYPE html> | Standards (full) | HTML5 (2014) |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | Standards | HTML 4.01 Strict (1999) |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...> | Standards | XHTML 1.0 Strict (2000) |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...> | Almost-standards | XHTML 1.0 Transitional |
| (no doctype, malformed, or HTML 2.0) | Quirks | Pre-1999 IE behavior |
The Three Rendering Modes
Browsers pick a rendering mode based on the doctype. There are exactly three:
- Standards mode: Modern CSS box model, modern JS API behavior. This is what you want.
- Almost-standards mode: Like standards mode, except table cell vertical alignment uses legacy XHTML rules. Triggered by transitional XHTML doctypes.
- Quirks mode: Emulates Internet Explorer 5 bugs from the late 1990s. The CSS box model includes padding and border in width, JavaScript APIs behave differently, and layout breaks in unpredictable ways.
The Correct HTML5 Doctype
Use this exact declaration as the first line of every HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<!-- Page content -->
</body>
</html>The doctype is case-insensitive. <!doctype html>, <!DOCTYPE HTML>, and <!DOCTYPE html> all work the same way.
How to Test Which Mode Your Page Uses
Open the browser console on any page and run:
document.compatMode
// "CSS1Compat" -> standards mode (correct)
// "BackCompat" -> quirks mode (broken)- Open DevTools (F12 or Cmd+Option+I).
- Go to the Console tab.
- Type document.compatMode and press Enter.
- If it returns "BackCompat", your doctype is missing or malformed.
- Run an automated audit and check the "Page has the HTML doctype" result under Best Practices.
Common Mistakes
- Whitespace before the doctype: A blank line or BOM at the top of the file pushes the doctype past the first line and triggers quirks mode in older IE.
- HTML comment before the doctype: <!-- ... --> placed above <!DOCTYPE html> is the most common cause of accidental quirks mode.
- Using outdated XHTML or HTML 4 doctypes: They still work, but they are unnecessarily long and some transitional variants trigger almost-standards mode.
- Misspelling the declaration: <DOCTYPE html> (missing the bang) or <!DOCTYPE> (missing "html") both trigger quirks mode.
- Server-rendered templates that omit the doctype: Layout files in CMS themes sometimes lose the line during edits.
FAQ
Is the doctype an HTML tag?
No. It is a document type declaration that precedes the HTML. It does not have a closing tag and does not nest inside any element.
Do I need a DTD URL like in HTML 4?
No. HTML5 dropped the DTD requirement. <!DOCTYPE html> is complete on its own.
Does the doctype affect SEO?
Not directly. But quirks mode can break layout and Core Web Vitals, which do affect rankings. Automated Best Practices audits flag missing doctypes.
What happens if my page is in quirks mode?
CSS widths include padding and border, table cells align differently, getElementById may behave case-insensitively, and several modern APIs may misbehave. Cross-browser rendering becomes unpredictable.
Is the doctype case-sensitive?
No. The HTML5 spec defines it as case-insensitive. Convention is uppercase DOCTYPE for readability.
Can I use HTML5 doctype with older HTML 4 markup?
Yes. The HTML5 doctype is backward compatible. Existing markup keeps working, and the page renders in standards mode.
Does React or Next.js add the doctype automatically?
Yes. Next.js renders <!DOCTYPE html> automatically for every page. You only need to worry about the doctype in static HTML files or hand-built templates.
Is the doctype required for email HTML?
Email clients vary. Many strip it. For email, focus on inline styles and table-based layouts rather than relying on standards mode.
Does this affect AI search engines like ChatGPT and Perplexity?
Indirectly, yes. AI search engines (ChatGPT, Perplexity, Google AI Overviews) preferentially cite well-ranked, well-structured pages, and pages rendered in quirks mode often produce inconsistent layouts and broken DOM structures that machine parsers stumble on. Malformed or missing doctypes raise the chance that AI extractors misread your content or skip it for a cleaner-looking competitor.
Conclusion
Add <!DOCTYPE html> as the first line of every HTML document. It costs nothing, takes one line, and is the difference between standards mode and quirks mode. Verify with document.compatMode in the console and run an automated audit to confirm the "Page has the HTML doctype" check passes. Run a Greadme deep scan to verify the doctype across every page on your site so a single missing template line never quietly breaks a section of your site.