Way 2 Web

Web development tips


 
Doc Type

Quirks mode

You see an enigmatic tag at the start of an HTML page, in the source of a page you found on the web or inserted automatically by your IDE.

It looks something like:

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

Feeling experimental, or annoyed by this auto-code intrusion, you remove the tag and discover that the page works just as well without.

So why bother with a superfluous tag?

As it happens, this tag can make quite a difference.

DOCTYPE indicates the Document Type Definition (DTD) that defines the page. In other words, it tells the browser validator which version of HTML is in use. Using the correct DOCTYPE helps the page render and behave correctly in standards compliant browsers.

If no DOCTYPE is specified, or it is specified incorrectly, the browser enters "quirks mode" - it assumes that the page was written in old-style, non-standard compliant markup, and the browser interprets it accordingly, with unexpected results.

The DOCTYPE for you

A number of DOCTYPEs exist: strict, loose, transitional, frameset. See W3C for examples. But which DOCTYPE should you use?

The answer, as with many things, is: it depends.

Firstly, there are sets of DOCTYPEs for HTML pages versus XHTML pages. Within each group, you'll use:

strict
for pages that use separate CSS sheets, as the standards suggest
transitional
for pages that mix in presentational attributes too, despite the standards, such as when your target browsers can't handle CSS sheets
frameset
you guessed it, for pages that contain a <frameset> instead of <body>
In general, you'll need the "strict" DOCTYPE for HTML - the one that appears at the start of this article.

One last thing

Be sure that your DOCTYPE uses full URL paths (the ones that start with "http://..."). It seems that some enterprising developer copied the DOCTYPE from a w3c.org page, which used relative paths. And others followed suite.

References