Adding a doctype to your webpage

Home

Updated: May 24th, 09

Doctype is a special declaration at the very top of your webpage source, right above the <HTML> tag, that informs validators the rules in which to validate your page using, and for modern browsers (IE6+, Firefox, NS6+, Opera, IE5 Mac), whether to display your page in Quirks or Standards mode.

Below lists the major doctypes you can deploy on your webpage. All of them enters modern browsers into "Standards" mode when used.

HTML 5 doctype

HTML 5 advocates the use of the very simple doctype:

<!DOCTYPE HTML>

In fact, it refers to doctypes as a "mostly useless, but required, header" whose purpose is just to ensure browsers render web pages in the correct, standards compliant mode. The above doctype will do that, including in IE8. Ideally this should be your first choice for a doctype unless you need your webpages to validate in pre HTML 5 versions of the W3C validator (which may still be the case at the time of writing). For future proofing your web pages, however, this is the doctype to go with.

HTML 4.01 Transitional, Strict, Frameset

HTML 4.01 transitional doctype supports all attributes of HTML 4.01, presentational attributes, deprecated elements, and link targets. It is meant to be used for webpages that are transitioning to HTML 4.01 strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Strict is a trimmed down version of HTML 4.01 with emphasis on structure over presentation. Deprecated elements and attributes (including most presentational attributes), frames, and link targets are not allowed. CSS should be used to style all elements:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 frameset is identical to Transitional above, except for the use of <frameset> over <body>:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Transitional, Strict, Frameset

Use XHTML 1.0 Transitional when your webpage conforms to basic XHTML rules, but still uses some HTML presentational tags for the sake of viewers that don't support CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Use XHTML 1.0 Strict when your webpage conforms to XHTML rules and uses CSS for full separation between content and presentation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 frameset is identical to Transitional above, except in the use of the <frameset> tag over <body>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

XHTML 1.1 declaration. Visit the WC3 site for an overview and what's changed from 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">