DEV Community

Cover image for What the hell is <!DOCTYPE html>?
Amandeep Singh Malhotra
Amandeep Singh Malhotra

Posted on

What the hell is <!DOCTYPE html>?

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

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">
Enter fullscreen mode Exit fullscreen mode

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/

Discussion (26)

Collapse
thomasbnt profile image
Thomas Bnt

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!');
Enter fullscreen mode Exit fullscreen mode

Example of how to add colors and syntax in codeblocks

Collapse
aman894 profile image
Amandeep Singh Malhotra Author

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

Collapse
thomasbnt profile image
Thomas Bnt

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

Thread Thread
dragat19 profile image
Albert Sanchez • Edited on
console.log('hi'); 
Enter fullscreen mode Exit fullscreen mode
Collapse
kunalkeshan profile image
Kunal Keshan

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

Collapse
pengeszikra profile image
Peter Vivo

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">
Enter fullscreen mode Exit fullscreen mode

When debugged :

console.dir(document.doctype)

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

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

Collapse
knighttechwork profile image
Randy Knight

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

Collapse
aman894 profile image
Amandeep Singh Malhotra Author

Thank you 🙂

Collapse
craftyminer1971 profile image
CraftyMiner1971

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.

Collapse
invalidlenni profile image
InvalidLenni

Thanks! I didn't know that, but now I know that! Nice post about <!DOCTYPE>

Collapse
aman894 profile image
Amandeep Singh Malhotra Author

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! ✌️

Collapse
yongchanghe profile image
Yongchang He

This is interesting!

Collapse
kithminiii profile image
Kithmini🌸👩🏻‍🏫

Interesting Article

Collapse
atulcodex profile image
Atul Prajapati

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 🙏

Collapse
uponthesky profile image
UponTheSky

Nice Investigation! It was really informative!

Collapse
wjplatformer profile image
Wj • Edited on

Too detailed for 1 line of code 🤯. Good practice though especially when it comes to bigger stuff to discuss about.

Collapse
andrewbaisden profile image
Andrew Baisden

Nicely done good explanation.

Collapse
aman894 profile image
Amandeep Singh Malhotra Author

Thank you 🙂

Collapse
imonem profile image
imonem

I love history lessons, keep'em comin'

Collapse
stevob profile image
Steven Barrios

This was a great post!

Collapse
japayukishi profile image
Jap Monday • Edited on

I have to voice my passion for your kindness giving support to those people that should have guidance on this important matter. Concreters Wagga

Collapse
comandeer profile image
Tomasz Jakut

Older HTML versions weren't actually based on SGML. That was just the theory but it wasn't done in practice. Otherwise it would require browsers to fetch all these .dtd files to parse HTML elements correctly – especially if someone came up with their own one. Parsing rules were more likely just hardcoded into the browsers and later just codified in HTML5 spec.

BTW DTD-based DOCTYPEs created one other issue: DDOS-ing W3C's servers ;)

Collapse
forgamertt profile image
forgamertt

pg slot auto สล็อต ฝากถอนออโต้ ไม่มีขั้นต่ำ ฟรีเครดิต ทดลองเล่นฟรี พีจีสล็อต รวดเร็ว ปลอดภัย รองรับ ทรูมันนี่ ทรูวอลเล็ท ลิขสิทธิ์แท้ ระบบ AUTO มีดีที่ มีระบบเสถียร และความรวดเร็ว

Collapse
baenencalin profile image
Calin Baenen • Edited on

Does "Quirks Mode", ðe name, refer to ðe fact each browser handles þings differently?
I'd assume "yes", but it could mean someþing different.

Collapse
carneirodotdev profile image
Luiz Carneiro

Nice and simple! :) Enjoyed it!

Collapse
dgavarogers profile image
Ava Rogers

Thats HTML5