Doctypes

Fix Your Site With the Right DOCTYPE!

‍by Jeffrey Zeldman from A List Apart
You’ve done all the right stuff, but your site doesn’t look or work as it should in the latest browsers. You’ve written valid XHTML and CSS. You’ve used the W3C standard Document Object Model (DOM) to manipulate dynamic page elements. Yet, in browsers designed to support these very standards, your site is failing. A faulty DOCTYPE is likely to blame. This little article will provide you with DOCTYPEs that work, and explain the practical, real–world effect of these seemingly abstract tags.

‍WHY A DOCTYPE?
Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPES are a key component of compliant web pages: your markup and CSS won’t validate without them.

DOCTYPES are also essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla, IE5/Mac+, and IE6/Win+.

A recent DOCTYPE that includes a full URI (a complete web address) tells these browsers to render your page in standards–compliant mode, treating your (X)HTML, CSS, and DOM as you expect them to be treated.

Using an incomplete or outdated DOCTYPE—or no DOCTYPE at all—throws these same browsers into “Quirks” mode, where the browser assumes you’ve written old-fashioned, invalid markup and code per the depressing industry norms of the late 1990s.

In this setting, the browser will attempt to parse your page in backward–compatible fashion, rendering your CSS as it might have looked in IE4, and reverting to a proprietary, browser–specific DOM. (IE reverts to the IE DOM; Mozilla and Netscape 6 revert to who knows what.) Clearly, this is not what you want. But it is often what you’ll get, due to the preponderance of incorrect or incomplete DOCTYPE information this article hopes to correct.

(Note: The Opera browser does not play by these rules; it always attempts to render pages in standards–compliant mode. Go, Opera! On the other hand, Opera does not yet offer solid support for the W3C DOM. But they’re working on it.) {Ed: Since this article was first published, Opera has delivered the DOM-compliant Opera 7 browser.}

A typical DOCTYPE you might see on an HTML document is the HTML 4.01 transitional DOCTYPE. The DOCTYPE for HTML 4.01 Transitional documents looks like this: code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> code The DOCTYPE isn't exactly an HTML tag or XHTML element. Instead it is a declaration and always appears at the very top of your documents.

=Parts of a DOCTYPE = A DOCTYPE is made up of the following parts: > The identifier. It indicates to the user-agent that the enclosed information will define the type of document of the page. > The Top Element. This tells the browser what element to expect as the top-level element. For HTML and XHTML documents this element would be [|] > The Availability. The most common DOCTYPES you will use will be publicly available - "PUBLIC". But you can also specify a local DTD with the "SYSTEM" key word. > The Formal Public Identifier. This entire string is what identifies the DOCTYPE. The FPI is made up of these parts: > Registration. If there is a plus-sign (+) here, that means that the organization is registered with the ISO. A minus-sign (-) indicates that it is not registered. > The Organization. This is the group that owns and maintains the DOCTYPE being used. > The Type. This defines the type of DOCTYPE used. > The Human-Readable Label. This is the label that tells you what DTD is being used. It is written so that humans, rather than computers, can understand it. > The Language. This is the language that the DTD is written in. It is //not// the language of the content of the page.
 * **!DOCTYPE**
 * **HTML**
 * **PUBLIC**
 * **"-//W3C//DTD HTML 4.01 Transitional//EN"**
 * **-**
 * **W3C**
 * **DTD**
 * **HTML 4.01 Transitional**
 * **EN**

‍DOCTYPES THAT WORK
So what DOCTYPEs should we use? Glad you asked. The following complete DOCTYPEs are the ones we need:

‍HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[]">//

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

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

‍XHTML 1.0 Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[]">//

//<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[]">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "[]">

‍XHTML 1.1 DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[]">

Happy authoring and rendering!