Missing DOCTYPE declaration: what quirks mode does and how to fix it
A missing DOCTYPE means the page's HTML does not start with <!DOCTYPE html>, the one-line declaration that tells browsers to use modern standards mode. Without it, browsers switch to "quirks mode", which imitates the behavior of very old browsers, and some CSS layout, sizing and spacing behaves differently. Add <!DOCTYPE html> as the very first line of the document.
It has no direct effect on search rankings; search engines parse the page either way. It is a warning because quirks mode can quietly break layouts, especially on mobile, and because a missing DOCTYPE usually means the page's template is not the one you think it is.
What it looks like in the HTML
Before
<html lang="en-US">
<head>
<meta charset="UTF-8">
After
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
Why it matters
Browsers have three rendering modes. Standards mode follows current specifications. Quirks mode reproduces bugs from browsers of the late 1990s so that ancient pages still display as they did. The DOCTYPE is the switch between them: <!DOCTYPE html> means standards mode, and no DOCTYPE means quirks mode.
In quirks mode, the box model can differ (width may include padding and borders), percentage heights and table sizing behave differently, and some inline spacing changes. A theme designed and tested in standards mode can look subtly or badly wrong. You may not notice on your own screen, but different browsers do not all apply quirks identically.
Why a WordPress page might lack it
Every standard WordPress theme prints <!DOCTYPE html> at the top of its header template, and block themes get it from WordPress core. So when it is missing:
- A custom or old theme's
header.phpomits it, or has something printed before it that breaks the document structure. - A custom page template or plugin generates its own full HTML document (landing pages, maintenance and coming-soon screens, print views) without a DOCTYPE.
- An HTML minifier or optimization plugin strips it by mistake.
- A static HTML file uploaded to the server is being served instead of WordPress for that URL.
How to fix it in WordPress
- Look at the very top of the source. View source; the first line should be
<!DOCTYPE html>. If it is missing only on some pages, compare their templates with a page that has it. - Fix the theme header. In a classic theme, open
header.phpin your child theme and make sure the first line is<!DOCTYPE html>, followed by<html <?php language_attributes(); ?>>. Nothing, not even whitespace or a PHP notice, should print before it. - Check custom templates and plugins. A template or plugin that outputs a whole page needs its own DOCTYPE. Update it or report it to the developer.
- Test your optimization plugin. Temporarily turn off HTML minification and check whether the DOCTYPE comes back. If it does, change the plugin's settings or exclude HTML minification.
- Use the HTML5 DOCTYPE. Old declarations like XHTML 1.0 Transitional still trigger standards or almost-standards mode, but
<!DOCTYPE html>is the simplest and current form.
Hydrogen SEO outputs only head tags and does not change the DOCTYPE.
How to check the fix
View source and check the first line. In the browser console, document.compatMode returns CSS1Compat in standards mode and BackCompat in quirks mode. Look over the page on desktop and mobile for layout changes, since fixing quirks mode can itself shift a layout built around it. Then rerun the free SEO audit.
Common questions
Does a missing DOCTYPE affect SEO?
Not directly. Search engines parse the HTML either way. The risk is broken layouts in quirks mode, which affect visitors.
What is the correct DOCTYPE for HTML5?
<!DOCTYPE html>. It is case-insensitive and must be the first thing in the document.
Can anything go before the DOCTYPE?
Only whitespace or comments are tolerated, and it is safest to have nothing. Output printed before it by a plugin or PHP notice can cause problems.