Why You Should Use the Doctype Tag
In retrospect, I’m amazed how many years I went as a web designer without understanding a single thing about doctype tags. I’d seen them when I looked at the source code for other pages. Dreamweaver included one every time I created a new file. Here was a piece of code Macromedia felt important enough to include by default on every html document. What was it for? I’m a little chagrined to say I just didn’t care. What mattered to me was my page worked in my browser of choice. In the other major browsers it looked and functioned more or less the same. Over time that solution started to become less satisfying.
As my craft improved, I started to devote more attention to minor positioning issues. The difference between a margin of 10 pixels and 15 pixels began to matter to me. Since I spent a great deal of time on such decisions, I wanted everyone to see the page exactly as I intended. Why couldn’t all browsers just show things the same way?
We’re not quite there yet, but with the appropriate doctype, you can tell any browser to adhere as closely as possible to an agreed upon standard of HTML rendering. Alternatively, you can tell a browser to render the HTML the same way it has in previous (non-standards compliant) versions.
More than 90% of the time, you only need to worry about two versions of the doctype:
<!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”>
If you find yourself still using frames (yikes!) then you’ll want to use the following for (and only for) the main page that calls individual frames:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
The first doctype is the strict version. Use this when you want the browser to match published standards as closely as possible. With few exceptions I recommend you use the strict doctype for all new development. If you are adding doctypes to previously written code, it may make sense to use the transitional version. This choice tells the browser to operate in “quirks” mode and will usually offer the best backwards compatibility.
UPDATE: The second doctype shown above will actually still render the page in standards mode. One of the several ways to acheive quirks mode is to use: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> Thanks, Matthias!
If you aren’t familiar with all of the differences in how HTML is rendered with each doctype, the best way to learn is to experiment. Take pages you’ve created and try viewing them with different doctypes. Depending on some of your favorite techniques for creating pages, you may see either very little difference or you may see a lot. Consider the fact that without using doctypes at all, there are probably visitors to your site that see each of those different renderings. Sobering thought, eh?
Now that you’ve gone to the trouble of including a doctype tag, take that next step and make sure your page validates with the W3C Markup Validation Service. The validator will automatically check what doctype you’ve used, and validate your page against the appropriate standard.
So what happens when your page doesn’t validate? That’s up to you. You may change your code to make it perfectly compliant, or you may decide to let an error or two slide. Some errors may cause search engines to have difficulty reading your page, even if all the major browsers handle it without any problem. On this site, I have a validation error because I put a div tag inside an a tag. I understand why the error is being generated, but it behaves correctly in all major browsers and doesn’t seem to cause any problems with the major search engines right now. I’ve chosen to let the error stand. Some purists will fault me for that, and they actually have a pretty good point. Just because the currently popular browsers and search engines handle this error in an acceptable way, doesn’t mean the browsers and search engines a few years from now will do the same.
If you’ve done much searching on the web for doctypes (or looked at the validation for this site), you’ve seen references to XHTML 1.0. If you don’t know why you would use XHTML 1.0 over HTML 4.01, then don’t. Here’s a good test: is the xmlns attribute present in the <html> tag of your page? If not, you probably shouldn’t be using an XHTML doctype. (more on the differences between XHTML and HTML )
Need more detail about how different browsers react to different doctypes? Here’s a table breaking down whether certain browser-doctype combinations render HTML in “quirk” or “standard” mode.
Hey! Nice to see that old page is still useful to some people
. I’m sure the table is not 100% accurate today, but the Doctypes you suggest should trigger Standard Mode. I would however recommend writing XHTML instead of HTML4.
Matthias: In the interest of presenting a balanced view of all perspectives, why do you recommend XHTML? (If you have a link to a page that explains your position, that is welcome, too.)
No particular reason. It’s just a bit more thought through than HTML4. Considering the current mess the W3C is in right now, I wouldn’t expect XHTML 2 to hit the shelves anytime soon, though.