What is the difference between standards mode and quirks mode?

In the old days, pages were written in two versions:

  1. Netscape Navigator
  2. Microsoft Internet Exploreer
When W3C, was introduced, browsers could not just start using them as doing so would break most existing sites on the web. Browsers introduced two modes to treat new standards compliant sites differently from old legacy sites. 
Layout engines in browsers uses three modes:
  1. Quirks mode: In quirks mode, layout emulates nonstandard behavior in Navigator 4 and IE 5. These were needed for websites written before introduction of web standards. 
  2. Full standard mode: In this mode, the behavior described is same as described by HTML and CSS specifications. Most of the modern browsers uses full standard mode.  
  3. Almost standard Mode: In almost standard mode there is very small number of quirks implementation. 

Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older.
The DOCTYPE as, <!DOCTYPE html>, is the simplest possible, and the one recommended by HTML5. Earlier versions of the HTML standard recommended other variants, but all existing browsers today will use full standards mode for this DOCTYPE, even the dated Internet Explorer 6. 

About the Author

dr.code.skm

I am backend developer with passion in Web Application development using latest technologies like Laravel, PHP7, React, ECMAScript 6 and WordPress. I prefer spending time analyzing big data with Apache Spark. Apart from that, I do photography.