Using the DOCTYPE Element in Quirks Mode

Leave Out the Doctype to Put Browsers into Quirks Mode

Table of Contents
By
Jennifer Kyrnin
Jennifer Kyrnin
Writer
  • University of California
  • University of Washington

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

Learn about our Editorial Process
Updated on April 15, 2019

If you've been designing web pages for more than a few months, you are most likely aware of the difficulty in writing a page that looks the same in all browsers. In point of fact, that's impossible. Many browsers were written with special features that only they could handle. Or they have special ways of handling things that are different from how other browsers handle them. For example: 

DOCTYPE

calls.

  • Layers were created for use in Netscape browsers. They don't work in any other browser, and in fact have been deprecated in Netscape 6.x+.
  • Inline frames were originally created for Internet Explorer only, and have since become part of the HTML specification.
  • Internet Explorer 6.0 adds an additional space (like a
    ) surrounding tags unless you write the contents of the div all on one (long) line. (IE 6 has many more quirks as well as this one.)
  • Netscape 4.7 will not display tables that are not written in correct HTML - it shows a blank page instead. This was fixed in Netscape 6.

The problem for browser developers is that they have to create web browsers that are backward compatible with web pages built for older browsers. In order to deal with this issue, browser makers created modes for the browsers to operate in. These modes are defined by the presence or absence of a DOCTYPE element and what that 

DOCTYPE

calls.

DOCTYPE Switching and “Quirks Mode”

If you put the following

DOCTYPE






Modern browsers (Android 1+, Chrome 1+, IE 6+, iOS 1+, Firefox 1+, Netscape 6+, Opera 6+, Safari 1+) would interpret this in the following fashion:





    

  1. Because there is a correctly written 
    DOCTYPE
    , this triggers standards mode.
  2. It's an HTML 4.01 Transitional document
  3. Because it's in standards mode, most browsers will render the content compliant (or mostly compliant) with HTML 4.01 Transitional
    4. 






And if you put this
DOCTYPE






This tells modern browsers that you want to display your HTML 4.01 page in strict compliance with the DTD. These browsers will go into "strict" or "standards" mode and render the page in compliance with the standards. (So, for this document, tags such as might be completely ignored by the browser, as the FONT element has been deprecated in HTML 4.01 Strict.)






If you leave the
DOCTYPE






The table below shows what the common browsers do when presented with different common
DOCTYPE




 
  Microsoft Makes It Harder  



Internet Explorer 6 also has the feature that if you put anything at all above the
DOCTYPE
 declaration, they will go into quirks mode. So, both of these examples will put IE 6 into quirks mode, even though the 
DOCTYPE






and the XHTML 1.1
DOCTYPE






Plus, if you get past IE6, then you have the “feature” that Microsoft added in IE8 and IE9:


META
  element switching





    

  • IE 5.5 quirks mode (IE 8 and 9)
  • IE 7 standards mode (IE 8 and 9)
  • IE 8 almost standards mode (IE 8 and 9)
  • IE 8 standards mode (IE 8 and 9)
  • IE 9 almost standards mode (IE 9)
  • IE 9 standards mode (IE 9)
  • XML mode (IE 9)
    • 






IE 8 also introduced “Compatibility Mode” where the user could choose to change the rendering model back to IE 7 mode. So that even if you set the mode you want to set using both the
DOCTYPE
 and 
META
 elements, your page could still




 
  What Is Quirks Mode?  



Quirks mode was created to help deal with all the strange rendering and non-compliant browser support and hacks that web designers were using to deal with those things. The concern that browser manufacturers had was that if they switched their browsers over to full specification compliance, web designers would be left behind. By setting up
DOCTYPE




 
  Quirks Mode Effects  



There are several effects that most browsers use in Quirks Mode:





    

  • In some browsers, the box model changes to the IE 5.5 version of the box model in quirks mode.
  • Some browsers don't inherit styles into tables
  • Quirks mode affects the parsing of CSS and CSS layout dramatically, if you are converting pages to standards mode from quirks mode, be sure to test your CSS layout and parsing extensively.
  • Watch for changes to scripting when in quirks mode. Firefox changes the way the 
    id
     attribute works, for example. IE8 and IE9 have very dramatic changes to scripting in quirks mode.
    • 






There are also a difference in “Almost Standards Mode:”





    

  • The height of table cells with only images inside is computed differently from standards mode.
    • 




 
  How to Choose a DOCTYPE  



I go into more detail in my article
DOCTYPE 





    

  1. Always choose standards mode first. And the current standard you should be using is HTML5: Unless you have a specific reason to avoid using the HTML5 
    DOCTYPE
    , this is what you should be using.
  2. Go to strict HTML 4.01 if you need to validate legacy elements or want to avoid new features for some reason:
  3. If you have sliced images in a table and don't want to fix them, go to Transitional HTML 4.01:
  4. Don't write pages deliberately in quirks mode. Always use a 
    DOCTYPE
    . This will save you on development time in the future, and really has no benefit. IE6 is rapidly losing popularity and by designing for this browser (which is essentially what designing in quirks mode is) you are limiting yourself, your readers, and your pages. If you must write for IE 6 or 7, then use conditional comments to support them, rather than forcing modern browsers into quirks mode.
    5. 




 
  Why Use DOCTYPE  



Once you're aware of this type of
DOCTYPE
 switching going on, you can affect your web pages more directly by using a 
DOCTYPE
 that indicates what the browser can expect from your page. Also, once you start using 
DOCTYPE






Browser Versions and Quirks Mode

















DOCTYPE
Android
Chrome
Firefox
IE 8+
iOS
Opera 7.5+
Safari		
IE 6
IE 7
Opera 7		
Netscape 6






None
Quirks Mode
Quirks Mode
Quirks Mode




HTML 3.2








Quirks Mode
Quirks Mode
Quirks Mode




HTML 4.01







Transitional
Standards Mode*
Standards Mode*
Standards Mode




Transitional
Quirks Mode
Quirks Mode
Quirks Mode




Strict
Standards Mode
Standards Mode*
Standards Mode




Strict
Standards Mode
Standards Mode*
Standards Mode




HTML5








Standards Mode
Standards Mode*
Quirks Mode






*With this DOCTYPE, browsers are close to standards compliant, but have some issues—be sure to test. This is also known as “Almost Standards Mode.”
Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Using the DOCTYPE Element in Quirks Mode." ThoughtCo, Apr. 5, 2023, thoughtco.com/using-doctype-element-3464264. Kyrnin, Jennifer. (2023, April 5). Using the DOCTYPE Element in Quirks Mode. Retrieved from https://www.thoughtco.com/using-doctype-element-3464264 Kyrnin, Jennifer. "Using the DOCTYPE Element in Quirks Mode." ThoughtCo. https://www.thoughtco.com/using-doctype-element-3464264 (accessed June 7, 2023).