<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Some Web developers giggle at this line. Some others wonder “What? What is wrong with it? I’ve been using it ever since I started and it works!” If you belong to that second category, you either don’t know what this line does, or are too lazy to make your site standards-compliant.
For those who have always been wondering what this line does, a DOCTYPE declaration tells the browser what type of document it is receiving (obviously), and which version of that type. For example, the one at the top of this article would be at the beginning of a document using HTML version 4.01 Transitional. And it’s in English. The version distinction (here, “4.01 Transitional”) is important, because, as we will see, they are not always compatible with each other. Oh, and by the, way, the DOCTYPE declaration is required. Always.
“Transitional” Is a Relic of The Past
See, once upon a time, there was HTML 3. It was a pretty limited format designed for on-screen documents. It did not allow for global style declaration (except maybe for <basefont>), every font style had to be declared on the spot. If you are knowledgeable in text processing, then you know it is a no-no.
And at that time, the few different Web browsers pretty much interpreted the HTML language their own way; and worse, none of them were totally right. This made for sites “Designed For Internet Explorer” or “Designed For Netscape”, and sometimes, they even were designed for a particular version of a browser. Some browsers went so far as to define custom, proprietary elements that were not part of any standard. And websites used them at the time.
Then, in late 1997, came HTML 4, which introduced a lot of improvements. Among them was the fact that the HTML document could only contain the actual content of the page. The presentation (that is, font styles and colours as well as layout) was to be put a separate file in a newly introduced format: Cascading Style Sheets (or, in short, CSS). The HTML tags and attributes that affected the presentation, such as <font>, <u>, <strike>, <center> and align officially became obsolete. Strictly speaking, HTML 4 was therefore not backward compatible with HTML 3.
As you can imagine, not all Web developers had enough time on their hands to recode their site into valid HTML 4, so they made a special version of it, which they called “Transitional”, and which still allowed those old deprecated constructs from HTML 3, but also allowed that new stuff from version 4 such as CSS and logical styles. As the name implies, it was designed for the transition to HTML 4… in year 1997.
At the time of writing this, we are in year 2011, a bit more than thirteen years later.
XHTML 1 Transitional was also designed to allow old HTML 3 constructs. I don’t even know why it exists.
What you should be using by now (and, actually, many years before) is this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Using an older version or a Transitional version is no longer justifiable and will make you look like a n00b, or arguably worse, a jerk. Even if your WYSIWYG editor (such as Dreamweaver or Expression Web; they’re known to be foolish like that) defaults to that, change it.
I’ve been asked “So yeah, why does it matter anyway? My page still works!”
“Transitional” Makes Your Page Look Crappy
At the beginning of this century, two things happened:
Web designers and developers started trying to make their site work properly across all browsers instead of just one, and Web browser vendors realized what kind of a headache that was, and started to actually give W3C’s recommendations some attention. In other words, standards compliance became a marketing tool for browsers.
As a result, many developers also started coding their site according to W3C’s recommendations instead of using browsers’ proprietary constructs.
However, changing a browser’s behaviour to be standards-compliant has the costly price of breaking old websites that were relying on old browsers’ quirks, so they added some heuristics to detect if they were looking at an old page, or a newer, probably more standards-compliant one: If the page is using an old version of HTML, or a Transitional one, then it must certainly be an old page. This has the effect of putting the browser in “Quirks Mode”, which emulates an old, non-standards-compliant browser. The lack of a DOCTYPE declaration also throws the browser in Quirks mode, since a page lacking such a required declaration certainly isn’t standards-compliant.
A quirky rendering engine means that your code will have unexpected side effects, especially in terms of layout. This means that you’ll have to figure out some extra hacks to make it work properly. And worse, since old, quirky browsers all interpreted HTML and CSS in different ways, Internet Explorer’s Quirks mode will indeed be different Firefox’s… so there will have to be even more hacks to work around those differences. All of these hacks could be avoided simply by using a non-transitional DOCTYPE!
Still, Web developers keep using Transitional HTML, over ten years after the transition it refers to should have ended!
One of my clients had me fix a layout issue on their website, and even after I fixed the mess, the result was not consistent across browsers because the page did not only use, but actually relied on the browsers’ Quirks modes, because the original developer had mindlessly let Dreamweaver put in a Transitional DOCTYPE.
So, please, never use Transitional ever again. You and your visitors will both benefit of this. It will prevent weird side-effects from happening, and make your website work much more consistently across different browsers.
Dr Frankenstein's Lab 