Doctype Switch

Document Type Declarations or Doctypes

Whenever you create a web page you should be using a  document. type declaration or doctype. Using a doctype on your page is good coding practice and helps to ensure that your your pages will render properly on all browsers by triggering standards mode. That includes not just Netscape and Internet Explorer but also Mozilla, Opera, Safari (Mac OS X current default browser) as well as on Pocket Internet Explorer, Palm based browsers and Internet capable cell phones.

Early versions of the W3C (web standards organization) used simple doctype declarations to tell the browsers how to interpret the HTML on the page. An early doctype would look like:

During the period when HTML 2 or 3.2 were the current specification browsers were competing for market share and were not particularly concerned with following standards. This resulted in a lot of browser specific code. To increase their market share both browsers introduced proprietary tags such as <blink> and <marquee>. Then each would lobby the W3C to make their proprietary code part of the next HTML recommendation.  Even sites that used nothing but valid W3C tags and attributes would render differently in Netscape and Internet Explorer. (These were not the only browsers available at the time but Netscape had 70% or more of the browser market and Internet Explorer was the upstart rapidly gaining ground.)

This caused problems for both web designers and web visitors. It wasn't unusual to see "Best Viewed in Netscape 4" or "Your browser does not support the advanced features of this site, please upgrade your browser to Internet Explorer 4" (with hyperlink to the appropriate download page). As browsers evolved some site quit working and others behaved inconsistently with or without a doctype declaration. Desigers had come to realize that there were many ways to exploit table mark-up and proprietary browser code to produce more interesting sites that came close to traditional advertising.

The original pupose of HTML to create a structured document with symantic meaning was forgotten in favor of high style even if it meant that visitors could only use the site in one version of a specific web browser.

In an effort to return to the roots of structural mark-up HTML 4 with it subsequent amendments to 4.01 were released. This offered new methods for presentation. The first of which was a standards oriented doctype definition that emphasized separating content from presentation and depreciated the use of font tags and other mark-up purely for presentation. The second was the introduction of framesets. While the third option was the "transitional or loose" definition that would be backwards compatible with HTML 3.2, tolerate browser specific mark-up, and allow for the transition to separating content from presentation without breaking existing sites.

During this same period of time the browser manufacturers were coming under presure to make their browser more compliant with web standards. As the internet became the medium we know it today big business became aware of the marketing potential of the web. In addition the web no longer had one dominant browser, Netscape was steadily losing ground but Microsof's Internet Explorer had not yet achieved its current dominance. Sites designed to function in one browser and only one version of that browser didn't cut it for business. The last thing a company wants is to alienate a customer. Businesses did not want to foot the cost of having multiple versions of their web pages in order to appeal to their target audience. The push for browser to comply with standards began.

Browser manufacturers on the other hand were not quite so willing to give up the perceived advantages of having browser specific coding. Some of the browser programmers and web developers on the other hand felt it was time to make a greater effort to comply with the W3C recommendations, even going so far as to start calling them standards instead of recommendations. This is how the first doctype switch came into being. The doctype switch made its first appearance in Internet Explorer 5 for the Macintosh and has since been adopted by Internet Explorer for Windows, Opera and other browser manufacturers.

The doctype switch is where a browser that is missing a doctype or has a doctype without referencing the url would render the page in accordance with the browsers's DOM complete with all proprietary interpretations of the HTML. When the full doctype was used complete with the W3C url then the browser would render according to the standards where they differed from the browser's DOM. The doctype to trigger standards mode would look like:

Instead of like this:

Note that while the doctype switch is referred to by most designers as triggering either "quirks" or "standards" mode it is really more like "quirks" and "almost standards" mode. That is because in several places the W3C has left exactly how the recomendations are to be displayed up to the browser makers. This has resulted in a couple of fundamental interpretation differnces such which box model to use. Using an incorrect doctype can cause the page not to display at all (example of frames doctype causing the page to fail to appear in some versions of Internet Explorer 5 on the Mac). Usually this happens when the frameset doctype is used but the page is not a frameset.

While this may not seem like a big deal it can lead to browsers displaying the same content and mark-up differently but not as dramtically differently as the browsers can/will display the code when in quirks mode.

The web is continuing to change with the introduction of XHTML. Like HTML 4.01 it has three doctypes. Strict, Transitional and Frames are used in the same manner as in HTML 4.01. This is a widely supported standard and will work on even older web browser such as Netscape 4.x especially if the Transitional version is used which look like:

NOTE: The W3C specifications for XHTML include two methods of setting the language for the webpage. The first way recommended for use by the W3C uses an XML prolog but using it puts some browsers into "quirks" mode. A list of browsers and whether they have a problem with the XML prolog is available at http://www.webstandards.org/learn/reference/prolog_problems.html Instead of

It is better to use the alternative method of specifying the language in a meta tag like this:

A complete valid XHTML Transitional doctype would look like this:

On the examples page there are screen shots of various render modes using a doctype switch and links to the pages used to create the screen captures. Additional sources for quirks mode rendering are in the resources at the end of this article.

The latest XHTML version to achieve recomended status on May 31, 2001 is XHTML 1.1. With XHTML 1.1 there is no more Trnasitional or Frameset doctypes. XHTML 1.1 is a reformulation of XHTML 1.0 Strict. Because several elements are no longer valid in XHTML 1.1 that older browsers rely on such as the "a" and "map" elements that have been replaced with the "id" element older browsers may not render those items correctly. As a result the XHTML 1.1 doctype has been slow to gain acceptance. The XHTML 1.1 doctype looks like:

One goal of XHTML 1.1 is to "modularize" HTML as a result many of the elements that were contained in separate doctypes in HTML 4.01 and XHMTL 1.0 are now modules that can be added to the basic doctype to include support for frames, legacy code, etc. While intended to make doctypes more understandable I find that having to add modules and make semi-custom doctypes to be more trouble than it is worth especially considering the poor support for XHTML 1.1 amongst current browsers. As a result it is beyond the scope of this presentation. To read more about the XHTML 1.1 spec and its modules see http://www.w3.org/TR/xhtml11

Additional Resources

• Valid Doctypes from the W3C Quaility Assurance Page http://www.w3.org/QA/2002/04/valid-dtd-list.html
• W3C HTML Validator http://validator.w3.org
• css-d discussion list wiki http://css-discuss.incutio.com/?page=QuirksRenderingMode
• Eric Meyer's Grid of Rendering Mode based on Doctype http://www.meyerweb.com/eric/dom/dtype/dtype-grid.html