Document Types
The document type (doctype) declaration tells which version of XHTML or HTML your document is (though this will not be the case with the proposed doctype for use with HTML5, which continues to be under development). More importantly, however, it also tells the browser whether it should render in Standards Compliance Mode, Almost Standards Mode, or Quirks Mode. Standards Compliance Mode is best. In Standards Compliance Mode, browsers render pages as close to the standards as they can, which of course is much closer in some browsers than in others.
Which doctype you use will influence which box model is used in some browsers, including IE (6 and newer). Also there is a bug in IE6 where if you put anything before the doctype, including an XML Declaration, it will cause IE6 to render in Quirks Mode (aka backwards compatibility mode), which includes using the IE5.x/Win box model. The XML Declaration doesn't cause IE7+ to go into Quirks mode. However, putting a comment or any other characters other than white-space characters before the doctype will put IE 6 (and newer) back into IE5 compatibility mode.
Some of the articles listed below describe which doctypes trigger which modes in various browsers, so I'm not going to go into detail here. What I'll say is that in general you should use a doctype that includes a URL and that Strict doctypes are best. The two most notable exceptions are the HTML 4.01 Strict doctype (without the URL) and HTML5 doctype, which are fine to use even though they don't include the URL.
I now recommend the HTML5 doctype. With it you can use as many or as few new HTML5 features as you want. A doctype is not a magic fix. It is the first step in the process of making your page display the same or very close to the same in a variety of web browsers.
Doctypes
HTML 5
<!DOCTYPE html>
<html>
<head>
HTML 4.01 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
HTML 4.01 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
Strict Doctypes are Best
Strict Doctypes require you to remove presentational markup (CSS should be
used instead anyway), <iframe>
elements, and the
target
attribute that are allowed by Transitional doctypes.
However, HTML5 does allow the use of <iframe>
elements, and the target
attribute, since many people find them
useful in Web applications.
- No more Transitional DOCTYPEs, please
- It's Time To Kill Off Transitional DOCTYPES
- Transitional vs. Strict Markup
Other Articles on Choosing Your Document Type
- Doctypes and markup styles
- Choosing the right doctype for your HTML documents
- SitePoint Reference » Doctypes
- Activating the Right Layout Mode Using the Doctype Declaration
- Fix Your Site With the Right DOCTYPE!
- Choosing a DOCTYPE
- Doctype switching
- Picking a Rendering Mode
- Rendering Mode and Doctype Switching
- How to achieve Web standards and quality on your Web site?
- List of Common Doctypes