DOCTYPE HTML: A Comprehensive Explanation

what is doctype html

If you go to a website and inspect its page source, you’ll notice this <!DOCTYPE html> declaration before the <html> element.

In this post, you’re going to find out what exactly is DOCTYPE, why is it useful and what’s the history behind it.

You can also supplement your learning with this video:

 

Let’s get started!

What is DOCTYPE?

DOCTYPE stands for Document Type Declaration and it is the first line of code required in every HTML or XHTML document.

This is important because different versions of HTML or XHTML have different rules and syntaxes.

DOCTYPE is not an HTML element, like <body> or <div>.

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 <!DOCTYPE html>.

Nothing else.

Not even XHTML doctype.

Any other DOCTYPE other than <!DOCTYPE html>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

netscape navigator microsoft internet explorer dinosaurs fighting

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.

simple web page with and without doctype declaration 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.

w3c site xhtml 1

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 in the comments section below.

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.   
Spread the love

You may also like...