Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 5dc1495f05
Fetching contributors…

Cannot retrieve contributors at this time

278 lines (141 sloc) 13.164 kb
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>The Truth about Doctypes | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="I knew I had to declare a Doctype but just didn&rsquo;t know why. I recently had to work with html files without Doctype and didn&rsquo;t even &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="">twitter</a> <a class="rss" href="">RSS Feed</a> <a class="youtube" href="">Youtube Channel</a> <a class="github" href="">Github</a></h2>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
<nav class="article">
<a class="previous" href="/book-review-for-feb-2009.html" title="Book Review for Feb 2009">&#x276C;</a>
<a class="next" href="/book-reviews-for-march-2009.html" title="Book Reviews for March 2009">&#x276D;</a>
<time datetime="2009-03-22T00:00:00-07:00" pubdate><span class='month'>Mar</span> <span class='day'>22</span> <span class='year'>2009</span></time>
<h1 class="entry-title"><a href="/the-truth-about-doctypes.html">The Truth about Doctypes</a></h1>
<div class="entry-content"><p>I knew I had to declare a Doctype but just didn&rsquo;t know why. I recently had to work with html files without Doctype and didn&rsquo;t even realise that the IE errors I was coming across was because of the triggering of quirks mode. Today I read in depth about Doctypes and I burn in shame to know how many bugs could simply be resolved by declaring a Doctype. So, here is what I found out about the Damned Doctypes.</p>
<p>Long long time ago in the age of no standards, people wrote HTML with reckless abandon which resulted in tag soups and atrocious styling. Browsers were no better and tried to &ldquo;fix&rdquo; the errors in CSS declarations and generally did not obey any standard. </p>
<p>In 1995 the first signs of standardisation came in the form of HTML 2.0 HTML specification (note that there was no HTML 1.0) which first introduced the use of Doctype &ldquo;To identify information as an HTML document conforming to this specification, each document must start with &hellip; document type declarations.&rdquo;</p>
<p>At end of December 1997, HTML 4.0 was released which specified 3 different specifications. A HTML document can choose which one to follow, by indicating with the Doctype: A Strict specification (which excludes deprecated elements and frames), a Transitional specification (which excludes only frames), and a Frameset specification (which allows just about anything!).</p>
<p>With the 3 flavours of HTML 4.0, browsers had the burden of having to display non-confirming HTML like it used to before (as many old websites would break if the browsers changed the CSS and HTML implementation to match the standards) as well as new HTML documents produced to confirm to the specifications.</p>
<p><a href="Çelik">Tantek Çelik</a>, first implemented the innovative Doctype Switching while working on Internet Explorer 5 for Mac. The idea was this, if the Doctype specifies one of the modern specifications, the browser will render the HTML in &ldquo;standards mode&rdquo; and if not, the browser will render the HTML in &ldquo;quirks mode&rdquo;. Soon, all other browsers adopted it.</p>
<p>There is a 3rd mode called &ldquo;Almost Standards Mode&rdquo; which only differs from &ldquo;Standards Mode&rdquo; in the implementation of vertical sizing of table cells (IE 6 and 7 only render this mode and never the standards mode).</p>
<h3>QUIRKS MODE</h3>
<p>When a browser renders a document in quirks mode, it interprets the CSS and HTML like older versions of the browser allowing for nonstandard code and workarounds. The most affected is the CSS of the HTML document which gets interpreted differently in this mode.</p>
<p>There is no standard on which Doctype will trigger quirks mode, each browser has its own list of Doctypes that will trigger the quirks mode (<a href="">see this chart</a>).</p>
<p>For IE 6, 7 and 8, the Doctype declaration should be the very first line of the HTML document, otherwise it defaults to quirks mode (An XML declaration before an XHTML Doctype or even having a HTML comment above the Doctype declaration will trigger quirks mode). In IE 7 and 8, having an XML declaration as the first line of the HTML document will no longer trigger quirks mode.</p>
<p>Here is how valid CSS declarations get misinterpreted in IE 6, 7 and 8, when they are in quirks mode:</p>
<li>The Box Model is rendered incorrectly (padding is applied within the declared width of an element instead of being added to the declared width of an element).</li>
<li>The dimensions of a block level element changes if the content of the element does not fit the declared dimensions (e.g. If a paragraph which has a <code>height:200px;</code> specified will expand in IE 6 and 7 in quirks mode if the actual text content is longer than that declared height).</li>
<li>The default <code>margin-left</code> and <code>margin-right</code> of a floated element becomes 3px in IE. </li>
<li><code>margin:0 auto</code> does not center elements.</li>
<li>Font properties are not inherited from parent elements to tables.</li>
<p>Other browsers have their own set of weird behaviors in quirks mode. </p>
<h3>FUN TIMES WITH IE 8</h3>
<p>As IE 6 and IE 7 &ldquo;standards&rdquo; mode did not fully confirm to the specifications, many websites had &ldquo;hacks&rdquo; to make them &ldquo;look good&rdquo; in &ldquo;standards mode&rdquo;. These websites will all appear &ldquo;broken&rdquo; in IE 8 when that comes along (since it complies more to standards than before), so here we go AGAIN down the road of Doctype switching.</p>
<p>So, now IE 8 has at least 4 modes, quirks mode, IE 7 standards mode, IE 8 almost standards mode and IE 8 standards mode.</p>
<p>Now IE 8 wants to introduce a NEW switching mechanism by using the <code>&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot; /&gt;</code> declaration to make sure it uses the IE 8 standards mode to render. If this meta declaration does not exist, it will use other various sources to determine which mode to render, most likely defaulting to IE 7 standards mode.</p>
<h3>SO THE POINT IS</h3>
<p>Just use the damned Doctype to make sure browsers don&rsquo;t default to quirks mode with your HTML documents. You are safe in using:</p>
<span class="strike"><code>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;;&gt;</code> </span>
<span class=strike><code>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;;&gt;</code> (except it triggers quirks mode in Konqueror 3.2, matters only if you know and care about that browser). </span>
<span class=strike><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot; &quot;;&gt; </code> (without the XML prolog) </span>
<li><a href="">Just use <code>&lt;!doctype html&gt;</code></a></li>
<p>I hope this is of some use to you when you go about coding your HTML pages. Remember the damned Doctype!</p>
<li><p><a href="">CSS - Quirks mode and strict mode</a></p></li>
<li><p><a href="">Activating Browser Modes with Doctype</a></p></li>
<p>[UPDATED: I edited the information about Doctype switching with inputs from <a href="">Russ Weakley</a>.]</p>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
<time datetime="2009-03-22T00:00:00-07:00" pubdate><span class='month'>Mar</span> <span class='day'>22</span> <span class='year'>2009</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
. If you would like to update this post, <a href="">please send a pull request</a>.
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<aside id="articles">
<p><img class="avatar"
height=48> <a href="">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="">Octopress</a></span>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = '';
var disqus_identifier = '';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<script src="/javascripts/octopress.js"></script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
Jump to Line
Something went wrong with that request. Please try again.