The All-Important DOCTYPE
[Begin Rant]
I don’t know how often I’ve had this conversation, but it always goes something like this:
PC: “Hi Developer. I notice there’s no doctype in your web pages. I wanted to come by and make sure there isn’t some sort of doctype-destroying virus running about.”It’s about this time I start scanning the immediate area for something heavy to throw.
Developer: “Oh, hi PC. Yeah, I delete all of that garbage. Meta tags, doctypes, anything before the HTML tag and between it and the BODY tag is just junk. Do you have a spork I can borrow?”
The doctype is the first line of your web page, and it generally looks something like this:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd">
The doctype is a very important thing. This tag tells the browser which HTML or XHTML specification the document uses.
HTML is a mark up language. The browser has to take a collection of tags and interpret how to render the page based on a certain specification. The doctype tag tells the browser what specification to use when interpreting the page. In other words, specifying different doctypes can make the page render differently.
When presented with a page with no doctype specified, most modern browsers go in to what they call “quirks mode”. Quirks mode emulates rendering bugs in older browsers, and is generally not interpreted the same way in any two browsers. It is, after all, “quirks”.
By specifying a doctype, the various browsers will use a standards-compliant method to interpret the page, making page rendering both quicker and more predictable across different browsers.
There are several doctypes to choose from for HTML and XHTML. There’s really old HTML you will probably never use:
HTML 2.0
<!DOCTYPE html PUBLIC “-//IETF//DTD HTML 2.0//EN”>
HTML 3.2
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”>
Then there’s the three types of modern HTML you will likely use - Strict (all presentation in CSS), Transitional or Loose (some presentation stuff still in the page), and Frameset (for frames):
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd">
Finally, there is XHTML. XHTML is HTML’s successor (though W3C is supporting both). It’s the intersection of XML and HTML, and hence is a bit stricter. This is a good thing, though, and allows you to treat HTML pages as XML documents (think “mashups”). The doctypes for XHTML are similar to HTML:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
That, in a nutshell, is the doctype tag. Rather than a meaningless dropping of your favorite WYSIWYG application, it’s an important part of your page. Know it. Use it. Love it.
Oh, and leave those meta tags alone too.*
[End Rant]
*Except the one that says “Created with Microsoft FrontPage”. Delete that before any of your friends see it.