It is an instruction for the browser on how to render the code on a webpage.

The good news is that you should only be using .

Nothing else.

Not even XHTML doctype.

Any other DOCTYPE other than is considered harmful and it is very frowned upon nowadays.

But do you know what else is considered harmful?

The absence of a DOCTYPE on a web page.

Having no DOCTYPE will trigger the browser to render the so-called Quirks mode.

Quirks mode

To explain what Quirks Mode is we have to go back in time when the Jurassic period of the World Wide Web was dominated by two major browsers:

1. Netscape Navigator
2. Microsoft Internet Explorer

Back then there were no web standards and the developers had to code two versions of the same web page.

One version for Netscape Navigator and one for Microsoft Internet Explorer.

Just imagine the joy…

Finally, when the web standards started to sprout and made their way out of the Jurassic period, the browsers could not just start using them as doing so would break most existing sites on the web.

So they started to treat new sites differently from the legacy ones.

Given the image below, on the left side, you can see a web page rendered with DOCTYPE and on the right side there’s a page without DOCTYPE, meaning it has been rendered in quirks mode.

Let’s go ahead and see some of the differences between the two.

If you are not able to spot them in the above image, make sure to check out the video which can be found at the beginning of this post.

In quirks mode, there are margins surrounding the page, while on the other webpage, we don’t have those margins.

One more thing, the paragraph is red while on the other page, it is not.

That’s because the name of the class is case-sensitive.

There are plenty of other similar quirks but these two are to give you a glimpse of the impact of not having DOCTYPE declared on a page.

Here you can find the source code so you can study it on your own or use it for future references

If you cannot figure out at first if the page is rendered in quirks mode or not, run the following line in the browser’s console:

document.compatMode

If the value is "BackCompat", the webpage is in quirks mode.

If the value is "CSS1Compat", the webpage is NOT in quirks mode.

Alright, hopefully now you have a little bit more of an understanding of how DOCTYPE came to be.

A bit of history about DOCTYPE html

Let’s now find out what an older version of DOCTYPE html looks like.

This is the World Wide Web Consortium’s website.

Based on the DOCTYPE, it is using HTML 4.

But there is one more thing here, it says Transitional…

Let’s go to another page of W3C and we can see that this one is using XHTML 1 with Strict.

Pretty interesting…

Strict, Transitional, and Frameset are really old stuff.

They are a flavor of how the browser should interpret the HTML code of the webpage.

Strict tells the browser it should not use some of these deprecated features:

• BASEFONT
• CENTER
• FONT
• S
• STRIKE
• U
• APPLET
• DIR
• ISINDEX
• MENU

Here is a snippet with examples of what the deprecated code of BASEFONT, CENTER, FONT, S, and U looks like:

Transitional tells the browser that it can use the deprecated elements mentioned above and also adds support for CSS 1.

Here is an example of what a CSS 1 code looks like:

Frameset is a variant of HTML 4 Transitional that uses FRAMESET element instead of the well-known BODY element.

That was it!

I hope you now have a better understanding of what is DOCTYPE html and the chaotic history behind it.

Let me know what you think about this article through comments below, or on Twitter at @pelu_carol.

If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.