<!DOCTYPE html>标签的作用与缺失影响：为何部分网页仍正常？

Great question! It’s super common to notice that simple pages work fine without <!DOCTYPE html> and wonder why we even bother with it. Let’s break down its purpose, what happens when you skip it, and why it needs to be first.

What’s the core necessity of <!DOCTYPE html>? #

This line is a document type declaration—it’s essentially a signal to your browser: "Hey, this is an HTML5 document, so render it using the official, modern HTML/CSS standards." The biggest reason it matters is controlling the browser’s rendering mode:

• Standards Mode: When the DOCTYPE is present, browsers use strict, consistent rules defined by web specs. This ensures your page looks and behaves the same across different browsers (Chrome, Firefox, Safari, etc.).
• Quirks Mode: Without it, browsers fall back to this legacy mode, designed to support ancient web pages (think 1990s-era HTML) that don’t follow modern standards.

What happens if you omit <!DOCTYPE html>? #

Skipping the declaration triggers Quirks Mode, which can lead to frustrating, hard-to-debug issues once your page gets beyond basic text:

• Broken box model: In Quirks Mode, an element’s width includes padding and border (instead of just the content area, like in Standards Mode). This ruins layouts that rely on precise sizing.
• Unpredictable default styles: Browsers apply different default margins, padding, and element dimensions in Quirks Mode. For example, the <body> tag might have extra margin that throws off your page’s alignment.
• CSS feature failures: Modern CSS tools like flexbox, grid, or position: fixed might behave unexpectedly or not work at all in Quirks Mode.
• Cross-browser chaos: Different browsers implement Quirks Mode slightly differently—what looks fine in Chrome might be completely broken in Firefox.

Why must it be placed at the very start of the document? #

Browsers parse HTML from top to bottom, and they need to know which rendering mode to use before processing any other content. If there’s anything (even a single space, comment, or XML declaration) before the DOCTYPE, most browsers will ignore the declaration entirely and switch to Quirks Mode.

For example, this will still trigger Quirks Mode even though the DOCTYPE is present:

<!-- A random comment -->
<!doctype html>
<html>
...

To guarantee your page uses Standards Mode, the DOCTYPE must be the first non-whitespace line in your document.

Why do simple pages still work without it? #

Your test pages are extremely basic—no complex layouts, CSS, or interactive elements. In cases like "Hello, world!", the differences between Standards and Quirks Mode are invisible. But as soon as you add grids, flexbox, or precise sizing, the inconsistencies will pop up immediately.

Modern browsers also have some built-in fault tolerance, but you can’t rely on that. Even if a page looks fine today, it might break unexpectedly when you add new features or when browsers update their rendering engines.

Example Code #

With DOCTYPE (Standards Mode)

<!doctype html>
<html>
<head>
</head>
<body>
Hello, world!
</body>
</html>

Without DOCTYPE (Quirks Mode)

<html>
<head>
</head>
<body>
Hello, world!
</body>
</html>

内容的提问来源于stack exchange，提问作者user9104738