FAQ: Choosing the best doctype for your site
The question about which doctype is the best often comes up in the forums. This post is a short and simple guide to choosing the right doctype for your pages.
The three doctypes recommended below are all suitable for general-purpose use - they cover the vast majority of scenarios you will encounter when designing a website. Edge cases such as markup for specific devices are not covered.
The recommended doctypes are all for the latest version of HTML: HTML 4.01
[w3.org]. You should never be using a doctype which refers to an older version of HTML (like 4.0 or 3.2). XHTML is not covered here for simplicity - and there is rarely a need to use XHTML on the web today. (See also the recent thread Why most of us should NOT use XHTML
[webmasterworld.com] for more information on the HTML vs. XHTML debate.) Important note
: the doctype should always
be placed on the very first line of the document, with no comments, white space or XML prolog preceding it. This is so that Internet Explorer 6 can select the correct rendering mode. Option 1: HTML 4.01 Transitional (full version)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The above doctype is the best choice when: You are building new pages and you are unsure what doctype to choose
You are using a tables-based layout or are placing images in tables
You want to use older (presentational) markup
You want to open links in new windows
The "full" version of the HTML 4.01 Transitional doctype is the best all-rounder - it triggers Standards Compliance Mode in modern browsers ("Almost Standards Mode" in Firefox), it contains all the necessary elements and attributes including deprecated (older) features. If at all unsure, choose this doctype!
Option 2: HTML 4.01 Transitional ("half" version)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
This doctype is different from the "full" version above in that the URL for the DTD is missing. This means that the page will be rendered in Quirks Mode in modern browsers. Quirks Mode means that the browser handles the markup in a compatible way with older browsers such as IE5 or Netscape 4.
The "half" doctype is the best choice when:
You have an existing tables-based layout that you are trying to validate
Using a newer doctype breaks the page design, and you do not want to rewrite the page
Your tables-based layout needs to work in very old browsers (IE3/5, Netscape 3/4...)
You should never use the "half" doctype when using CSS for layout, as the browser will not handle the the layout according to the established specifications. This will cause a lot of cross-browser headaches. Using the wrong doctype is an extremely common reason why CSS-positioned layouts fail. The "half" doctype is good for converting older pages when you don't want to recreate the whole thing - but for new pages, it is best to use the "full" version or HTML 4.01 Strict.
If you have older pages but you don't want to clean them up or make them pass validation, then there is no advantage in adding any doctype at all. When a browser encounters a page without a doctype, it automatically selects Quirks Mode and handles the page like an older browser. So if you have legacy pages without a doctype, don't worry about it until you want to rework those pages - they will continue to function as before for the foreseeable future!
Option 3: HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Strict is the recommended choice when:
You are using CSS for layout and presentation
You want to improve the accessibility of your page
You are catering for modern browsers (including IE6)
You want your page to work in alternative devices (mobile phones, consoles)
You want to improve your content-to-code ratio
You don't need presentational HTML
HTML 4.01 Strict triggers full Standards Compliance Mode in all modern browsers including Firefox, IE6, IE7, Opera, Konqueror, Safari... It is the ideal long-term choice when writing new pages with clean, compliant markup, combined with CSS for positioning and presentation. HTML 4.01 Strict does not include older presentational HTML such as
elements: they will still work, but the page won't validate.
There are two reasons for adding a doctype: the first is to trigger the correct browser rendering mode for your pages. The second is to allow you to check your page for errors. You should always try to validate your basic templates for HTML compliance. Markup errors can cause display errors, and can affect the spidering of your site by search engines.
W3 HTML validator [validator.w3.org]
WDG HTML validator [htmlhelp.com]
W3 CSS validator [jigsaw.w3.org]
The references below offer further discussion of doctypes and doctype switching if you want to go into more detail:
Activating the Right Layout Mode Using the Doctype Declaration [hsivonen.iki.fi] (Henri Sivonen)
Choosing a DOCTYPE [diveintoaccessibility.org] (Dive Into Accessibility)
Mozilla's Quirks Mode [developer.mozilla.org] (mozilla.org)
Quirks Mode vs. Standards Mode - overview [webmasterworld.com] (WebmasterWorld)
[edited by: tedster at 9:53 pm (utc) on Jul 5, 2010]
[edit reason] fix formatting [/edit]