What is a DOCTYPE and Why Does It Matter?

The DOCTYPE tag (short for “document type declaration”) describes the type of HTML used for a particular web page. How you define your DOCTYPE can have a profound effect on your website’s appearance.

The DOCTYPE is the first thing to appear on most HTML pages, even coming before the <HTML> tag. It will look something like this…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Why is the DOCTYPE so important? Well, for starters, it tells your visitor’s browser what rules to use when displaying your webpage. There are three basic DOCTYPE options:

Strict – The browser will follow the HTML rules as released by the W3C (the World Wide Web Consortium, the group that sets HTML standards). It will ignore deprecated items, such as the <font> tag. As you can imagine, this will wreak havoc with your web pages if you are still using such tags. If you don’t specify within the DOCTYPE tag which option you want, browsers will use the ‘strict’ ruleset by default.

Transitional – The browser will allow both current and deprecated tags to function. Most webpages use this DOCTYPE setting to allow greater flexibility.

Frameset – The browser will allow all tags as with the transitional setting, and will also allow the use of frames. Obviously you shouldn’t use this option unless you are building a page with frames, which is almost always a bad idea.

You can also use the DOCTYPE to specify whether your page is built in HTML or XHTML. If you don’t include a DOCTYPE tag at all, the browser will assume that the webpage was built prior to the tag’s inclusion and will use the ‘transitional’ ruleset.

Finally, a DOCTYPE will often include a URL from the official W3C site. These URLs point to pages that contain the relevant rulesets, so that browsers can seamlessly support your HTML code even after the W3C posts new standards.

Here are some of the more common DOCTYPE tags you might need to use:

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

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

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

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

Note that should the W3C release new versions of HTML or XHTML then the DOCTYPE tags will change as well. The above samples refer to HTML 4.01 and XHTML 1.0, as those are the most recent versions at the time of this writing.