Why? : HTML DOCTYPE (<!DOCTYPE html>)
The doctype declaration should be the very first thing in HTML document, before the html tag, it tell the browser, about which version of HTML we are using.
- It identifies which dialect of HTML you’re using.
- It controls whether the browsers uses “standards” or “quirks” mode to render the document.
But the question is — without doctype can the html content not rendered ???
Yes — but webpage is rendered in Quirks mode !!!!!
Generally, quirks mode is turned on when there is no correct DOCTYPE declaration, and quirks mode is turned off when there is a DOCTYPE definition. However, invalid HTML — with respect to the chosen DOCTYPE — can also cause the browser to switch to quirks mode.
What is quirks mode and standard mode ?
Initially when web started, everyone want their websites to be online and started building html pages.
These web pages were written separately for supporting various browsers. It means that if you were developing a website in the those days, you would have written code browsers specific. ( Netscape and IE )
Also , as there were no standards, no tools. developers started writing code to run on web and possible mistakes like missing closing tags, bad nesting , extra block elements closing tags and all are handled by browsers specific without any specification but with their own rules.
To solve this problem, standards were developed by W3C.
From W3.org:
DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.
But then, browsers started facing problem in the new W3 standards as it will break all the developed websites that were in the market. All those websites needs the code change.
So now browsers task is to
- Should allow web developers to choose which mode to use.
- (backward compatibility ) continue displaying old pages according to the old (quirks) rules.
The other thing to understand is browser only cares for only if Doctype is present or not ! but not the version number.
For example : Doctype for HTML 4 is present and try to include HTML5 audio or video tag and try to display the page on HTML5 capable browser, will it work? — — YES ! It won’t care for Doctype version. This will work even if Doctype is absent but it just render it in quirks mode
How to tell if a browser is in “quirks” mode?
On Firefox, use the command View/Page Info (and see the General pane).
By using document.compatMode, will tell you the mode you are in with most browsers like Chrome, Safari, and IE.
Consider below example:
check standard ( Doctype):
mode = document.compatMode;
modeIs an enumerated value that can be:
"BackCompat"if the document is in quirks mode."CSS1Compat"if the document is in no-quirks (also known as "standards") mode or limited-quirks (also known as "almost standards") mode.
if (document.compatMode == "BackCompat") {
// in Quirks mode
}In same as above example , write code without having a valid DOCTYPE then document.compatMode will return “BackCompat”
Thanks!