How to Set a Web Page's Doctype


What is a Doctype?

A web page's doctype is an instruction to the browser about which standard to use for the document. Several doctypes declarations and standards have existed through the years and you can find a list of them at www.w3.org's website. Since doctypes and standards have changed over time, the oldest web pages would not quite look right if rendered by a browser using the most recent standard. Additionally, newer web pages would not display correctly if the browser applied an older standard. Typically, browsers have a sets of code based on each standard that is used to render the content. The doctype declaration is simply a way to tell the browser which set of code it should use to appropriately render the content.

Why Set a Web Page's Doctype?

Setting a web page's doctype is extremely important. If you do not specify a doctype, browsers are left to guess the doctype. Granted, browsers are pretty smart about determining the doctype, but this can result in different problems such as the layout being messed up or showing elements that are meant to be hidden as plain text. Without a doctype declaration, browsers will load the page slower because it has to parse the document to determine the type and then start rendering the web page. If it cannot determine the type, then it launches into a "quirks" mode to render the web page's content. Setting the doctype aids browsers by telling them the standard you are using on this page and prevents them from using "quirks" mode to show your document.

Setting the Doctype

If you are using an environment like DreamWeaver, the doctype was probably included for you. A doctype is always specified before the HTML tag so that the browser understands the standard before it parses the content. Here are some examples of doctype declarations.

HTML 4.01 Doctype Declaration

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

HTML 5 Doctype Declaration

<!DOCTYPE HTML>