Amandeep Singh Malhotra

Posted on Jun 29, 2022

What the hell is <!DOCTYPE html>?

#html #webdev #beginners #discuss

<!DOCTYPE html> <!-- What the hell is this?? -->>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
</body>
</html

When creating a new HTML file, you might have wondered, “Why do I need to add this statement to the first line of my HTML file? Doesn’t the .html file extension suffice in telling the browser that this is an HTML file?”. While this is true, there’s still more to it. Before we understand the above statement, let’s try to understand what a DTD is.

Document Type Definition (DTD)

A Document Type Definition (or DTD in short) describes the document structure of an XML document along with a list of the legal elements the document can have.

Prior to HTML5 (for e.g. in HTML 4.01), all HTML documents would have to contain a “Doctype” declaration on its first line along with a reference to its type definition. This would look something like:

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

This declaration served two purposes:

Provide the list of valid elements the document can contain.
Define the flavour of the DTD which could be strict, transitional or frameset. More on this here.

So why don’t you see these long DTD references in the latest HTML files you've encountered?

Enter HTML5!

See, earlier versions of HTML (prior to HTML5) were SGML (Standard Generalized Markup Language) based, and therefore required a reference to DTDs. HTML5 onwards, this reference was no longer needed since this version of HTML is not SGML based.

So now, this “Doctype” declaration serves another purpose. It allows browser to run the HTML file in a “Standard mode”. Now it’s logical to ask, “What on earth is this standard mode now??” To understand this, let’s go back in time.

Back in time

Back when tech enthusiasts realised the power of what would be known as the internet, two popular browsers came into existence - the Netscape Navigator & following its success, (drumrolls) Microsoft’s Internet explorer. This was even before the W3C standards came into picture which would eventually standardise how code would run across different browsers. Hence, you can imagine that, given the popularity of these browsers, websites were written in two versions - one for the Navigator, and the other one for IE, which might sound a little redundant now, but was the norm back then. However, after the W3C standards were created and browsers started adhering to them, developers encountered a new problem.

The problem now was that the legacy code started to break. Hence, a possible solution to this was that the sites were now made in two versions - a Standard version (the one which we mentioned earlier) which was W3C standards compliant and hence would run across different browsers and a Quirks version which supported the legacy code.

Now how do browsers identify which mode it needs to use? Well, just add a valid DOCTYPE declaration in the first line of the HTML file, to instruct the browser to run the code in Standard mode. Anything other than that will trigger the Quirks mode in IE9 or older. This is exactly what <!DOCTYPE html> does HTML5 onwards. If you fail to add this line to your HTML file, the browser would interpret this as an instruction to run your code in Quirks mode, and you could end up getting inconsistent results across different browsers.

Conclusion

With this little background in mind, I hope you now understand the importance of the <!DOCTYPE html> statement. If you’d like to read a little more on this, please go through the links I have provided as a reference below.

References

https://www.freecodecamp.org/news/what-is-the-doctype-declaration-in-html/
https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
https://hsivonen.fi/doctype/

Top comments (30)

Thomas Bnt ☕ • Jun 29 '22

Cool post about DOCTYPE! 👍🏼

Don't hesitate to put colors on your codeblock like this example for have to have a better understanding of your code 😎

console.log('Hello world!');

Amandeep Singh Malhotra • Jun 29 '22

Hey Thomas, since was my first post at dev.to, I was not aware of this. Thanks for your input. :)

Thomas Bnt ☕ • Jun 29 '22

Oh don't worry! Very nice first post! And welcome to DEV! 👋🏼🚀

Albert Sanchez • Jul 6 '22 • Edited

console.log('hi');

Peter Vivo • Jun 29 '22

I take look my old cv (around 2008) doctype and that was:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

When debugged :

console.dir(document.doctype)

{
  publicId: "-//W3C//DTD HTML 4.0//EN"
  systemId: "http://www.w3.org/TR/REC-html40/strict.dtd"
...restOfDoctype
}

Saddly my old flash animation and program does not run in modern browser, I lost them, just keep the doctype.

Randell Brian Knight • Jun 30 '22

Very nice article about DOCTYPE! 🎉 It's good to have some useful background information about these topics. Thank you, Amandeep 😎

Amandeep Singh Malhotra • Jul 1 '22

Thank you 🙂

Kunal Keshan • Jun 29 '22

Awesome! didn't know about the quirks mode fallback if the DocType is not mentioned.

CraftyMiner1971 • Jul 3 '22

Thanks for the simple explanation of the DocType! I'm so glad that the W3C people simplified the DocType, cos i would not be able to remember all that fancy code that went into the former starting line for HTML files.

Amandeep Singh Malhotra • Jul 6 '22

Thank you for going through this article. I have written another article which explains the this keyword in javascript. If you'd like to explore it, please go through this link. Thanks! ✌️

Kithmini • Jun 30 '22

Interesting Article

🚩 Atul Prajapati 🇮🇳 • Jun 30 '22

In starting days of my learning web development i have asked several times to my institute teacher but they are unable to solve my curiosity 😌 thanks for your priceless effort 🙏🙏 shatsriya a kal 🙏