HTML Doctype: How to Declare It and Fix a Missing Doctype

What Is a Doctype Declaration in HTML?

People call it the html doctype tag, but it isn't a tag. It is an instruction with no closing tag and no attributes, and it never belongs inside head or body. When the parser accepts it, the browser creates a doctype node in the Document Object Model, which you can inspect in the console as document.doctype.

The name is short for document type declaration. In the SGML era, pages pointed at a document type definition, or DTD, that listed the allowed elements. That's why older doctypes carry a doctype public identifier and often a system identifier, a URL ending in strict.dtd or loose.dtd. HTML5 dropped the DTD and kept the doctype only as the standards mode switch.

Don't mix it up with two neighbors: the lang attribute names the language, and the charset declaration says how bytes are decoded. Our charset declaration guide covers the last one.

How to Write the HTML Doctype Declaration

The doctype syntax is a single short line, and it goes first in the file. Here is a minimal page you can copy into a template.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Doctype demo</title>
</head>
<body>
  <p>Hello, standards mode.</p>
</body>
</html>

The doctype sits alone on line one, the html root element follows and the charset tag leads off the head. The keyword is case insensitive, so DOCTYPE and doctype both work. Skip any version number, quotes or closing slash.

The HTML Standard doctype section allows comments and whitespace before it, but don't use that freedom. XML generators sometimes print the legacy form <!DOCTYPE html SYSTEM "about:legacy-compat">, which is valid and still gives standards mode, though Lighthouse expects the plain short form and will flag it, so switch to <!DOCTYPE html> if you control the template.

Paste the sample into the Online HTML Viewer, or edit your page in the HTML Editor.

Why the HTML Doctype Matters: Standards Mode vs Quirks Mode

Browsers use one of three rendering modes: no-quirks, which most people call standards mode; limited-quirks, called almost standards mode in older docs; and full quirks. The document.compatMode property returns CSS1Compat for the first two and BackCompat for quirks mode. Quirks mode copies Netscape Navigator 4 and Internet Explorer 5 so old pages keep working. The MDN quirks mode guide explains how the doctype picks the mode.

In our test in headless Chromium, a div set to 24px text held a table. With a doctype the table cell text measured 24px. Without one it dropped to 16px, because quirks mode stops tables inheriting font size. Run document.compatMode in the browser DevTools console to check any page yourself.

Read document.doctype to see the name, publicId and systemId the browser really parsed. Firefox also logs a console warning for quirks mode, so check the Console tab before a validator. The Nu HTML Checker flags a missing doctype too.

Search engines don't reward a page for having a doctype, but you gain stable rendering and a clean Lighthouse result.

How SEO Site Checker Tests Your HTML Doctype

Our free website SEO score checker doesn't search your raw source for the word doctype. A headless Chromium browser loads the page and we serialize the final document.

The rule: the check passes when the first line of the rendered HTML starts with a doctype, tested without regard to letter case.

A pass shows a green tick, a line saying the page has a doctype declaration and a code badge. A fail shows a red icon, a line saying it has none, a red How to Fix button and a Read the Doctype guide link pointing here. The badge always prints the short HTML5 form, so it can't show your version.

The Lighthouse doctype audit also flags a missing doctype. Lighthouse is stricter: it also flags doctypes that push the page out of standards mode and expects the plain short form, so a pass in our report guarantees nothing there.

What passes

• Any doctype on line one counts, in any letter case, including legacy HTML 4.01 and XHTML forms.
• A comment, blank lines, an XML declaration or one byte order mark before it still pass.

What fails

• No doctype declaration at all fails, and so does a typo in the keyword, a doctype with no name or a doctype placed after the html tag.
• Any stray output printed before the doctype also fails: visible text, an element, a PHP notice or a second byte order mark. The late doctype is ignored.

What the check does not test

• It doesn't judge the choice. A misspelled name such as htm and an HTML 4.01 Transitional identifier with no URL both pass while still triggering quirks mode, and junk after the name, such as a stray word after html, also passes while still rendering in quirks mode.
• XHTML served as application/xhtml+xml without a doctype is in standards mode, yet it fails here.

Check my site free

HTML Doctype Types Compared: HTML5, HTML 4.01 and XHTML

This table shows the mode each older doctype triggers.

Frame based pages are covered in our framesets guide, and old doctypes tend to arrive with font and center tags, which the deprecated HTML tags guide explains.

Where to Add the Doctype in WordPress, Laravel and Static Sites

Each platform prints the page top from a different file.

On WordPress and Laravel, a common culprit is output printed before the layout starts, for example a notice from functions.php, a plugin or a debug call. The mistakes list below shows what to look for.

Hosted builders such as Shopify, Wix and Squarespace print the doctype themselves, so a failure there usually points to custom code or a theme edit that outputs something first. On Shopify, check theme.liquid and any snippet above the opening tag, and ask platform support if you cannot find it. Keep the charset tag first inside head, as the charset guide above explains.

Common HTML Doctype Mistakes

• Output before the doctype. Visible text, a PHP notice, a second byte order mark or a non-breaking space pushes the doctype down and the browser ignores it. Plain blank lines and a single byte order mark do not fail our check, but remove them anyway. In PHP they are sent as output before your headers, which can cause the "headers already sent" warning, and keeping the doctype strictly first removes any doubt about how a browser will treat it.
• A second layout wrapping the page. A nested template can bury the real doctype, so search the raw source for a second opening html tag.
• A doctype after the html tag, or inside head. This usually comes from pasting a snippet at the top of a template, and the parser ignores a doctype it meets late.
• A mistyped name. Writing htm instead of html passes our check but renders in quirks mode, so compare the spelling against the short form.
• An old HTML 4.01 Transitional string. Tutorials paste it without its URL, which means quirks mode.
• A cached copy. A cache or CDN may serve the old page, so test with a throwaway query string.
• Trusting view page source alone. It shows the raw file, not the parsed page our report reads.