CODEWITHSUNDEEP
html
Mr. Zoidberg
Mr. Zoidberg

Reputation: 524

What happens if we don't use <!DOCTYPE html> statement ? (on modern and old browsers)

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?

Upvotes: 2

Views: 860

Answers (2)

Nick Vu
Nick Vu

Reputation: 15540

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>

enter image description here

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>

enter image description here

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.

Upvotes: 2

chris
chris

Reputation: 2820

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

Upvotes: 1

Related Questions