What happens if we don't use statement ? (on modern and old browsers)

Question

I'm a crack person as you see on my profile picture. If we don't use HTML5 DOCTYPE statement, all modern browsers goes heuristic or inherit mode?

Modern browsers seem our page as HTML5 and old ones suddenly get mad about

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

What happens?

Does this answer your question? [What is DOCTYPE?](https://stackoverflow.com/questions/414891/what-is-doctype) — sno2, Mar 16 '22 at 01:08
No @sno2 I don't need 2010 answers. Even 2020 edited is talking about IE. I just need to see some real samples. Even screenshots of web siites help a lot. By the way, this "quirksmode" answer is all about before CSS3 term. No explanation about modern browsers. inadequate — Mr. Zoidberg, Mar 16 '22 at 01:17

Nick Vu · Accepted Answer · 2022-03-16T16:21:57.630

According to W3 schools

All HTML documents must start with a <!DOCTYPE> declaration. The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.

Let's talk about the DOCTYPE history a bit

The early era of HTML was started from XML and all browsers were crazily developing it on their own and had individual HTML standards that made different rendering behaviors on browsers. It was really a hard time for most web developers.

And then W3C was established to standardize HTML for all websites, but the problem was how we can develop a new standard HTML but still keep the original HTML's behaviors on current web pages? They thought a new term for this backward compatibility which is Quirks mode, and DOCTYPE was born for new web standards, so most modern websites need DOCTYPE as the entry for understanding which HTML version developers writing to give consistent rendering across browsers.

Well, I think we have enough theory and history background, but with the human curiosity trait, I think it's not enough for us.

I can share a very good example of what will happen if you have and don't have DOCTYPE in your HTML.

Here is the code snippet

<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>The Transitional</title>
</head>

<body>
  <h1>Header</h1>
</body>

</html>

BUT you need to save that code snippet as a static HTML locally to see differences on browsers because nowadays, the latest browsers always populate DOCTYPE for you if you don't put it even though that automatic population also happens to most front-end development tools/frameworks. On top of that, all browsers have adapted to HTML5 for a long time, that's why now you're seeing very less people have mentioned problems around DOCTYPE.

Without DOCTYPE <!DOCTYPE html>

Once you inspect, you see H1's margin is 21.44px 0px which means we're expecting to see the top and bottom margins are 21.44px but that top margin is not applied correctly without DOCTYPE!

With DOCTYPE <!DOCTYPE html>

Yeah! Now we can see H1's margin is correct for top and bottom as expected.

I think it's good enough for the explanation. Feel free to reach out to me if you are still concerned about it.

score 1 · Answer 2 · edited Mar 16 '22 at 05:35

In short, without DOCTYPE the browser will try its best to render the HTML document.

Just to give more context, according to this thread, Firefox has

"reduced support for Quirks mode sites over the years".

This tells me that browsers are changing their backward compatibility over time, and it all depends on the browser and how they decide the rendering should happen. I found this article with the following quote, supporting that same idea, but this time referring to Internet Explorer:

Previously, different browsers implemented different quirks. In particular, in Internet Explorer 6, 7, 8 and 9, the Quirks mode is effectively frozen IE 5.5, while in other browsers the Quirks mode has been a handful of deviations from the Almost Standards mode. Recently, browsers have been converging on common behavior in their Quirks modes. Most notably, the primary Quirks mode of IE10 and IE11 is no longer an imitation of IE 5.5 but seeks to be interoperable with Quirks modes of other browsers.

Finally, here is a very interesting article about what has been observed to happen during Quirks Mode: What happens in Quirks Mode?

Basically the DOCTYPE activates the standard mode on browsers, and if it is not specified, then Quirks Mode is triggered. Another quote this time from the MDN web docs:

Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older.

Quirks mode: browser behaves as an old browser before web standards were made at W3C and widespread adoption of the web.

Standard mode: browser follows modern HTML and CSS specifications.

There is also almost-standard mode, which is a combination of the previous two but standard implementation is prevalent

What happens if we don't use statement ? (on modern and old browsers)

2 Answers2