CSS Tutorial - Interludium

About DTDs

Since we are about to learn how to program nice pages in XHTML and CSS, let me get at something else, that has nevertheless to do with well behaving web pages: Doctype declaration

What's a DOCTYPE, and why would I need that in my page?

A doctype says in which language the page is written - is it HTML4, is it XHTML, or something else? There are many doctypes that could be correct for (x)html pages, and there are more that do not interest us just yet ☺. These doctypes do not only identify the page to be written in HTML or XHTML in general, they give the version (HTML4.01, or XHTML1.1) and they can even identify specialised kinds, like when you want to have Frames in your pages, you need Frameset (like the following example).

					<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
					   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
				

This will tell the browser that the page is written in the XHTML variant v1.0, subset for framesets.
A list with valid doctypes can be found on the W3C pages. Since our pages are going to be XHTML 1.1 the general DTD will look like this:

					<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

					<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

In fact that's exactly what this page here has as the top two lines (before the <head> section). The second line is actually not about the Doctype, that is a namespace declaration saying the page is written in XHTML (computer language wise) and in English (human language wise). If I ever get around translating some or all of my pages into german, I will have to use this:

Important: There is this misconception that one has to put for a proper XHTML page this line as the very first line:
<?xml version="1.0" encoding="Windows-1252"?>.
This line does exist, and it is suggested to put that for XML pages (which XHTML is a part of), but it is not a must. And you shouldn't put it, since IE6 will get lost when it comes across that line. IE6 expects the DOCTYPE declaration to be in the first line, and if it finds something else, it switches into quirks mode!

That's all very exciting (and all very chinese), but, again, why would I care?

There are several reasons why to include the proper DTD:

It helps the browser to see for which kind of HTML you wrote your page, and therefore render it as intended. Most browsers, when finding a page without a proper doctype declaration ("DTD") will switch into a so called "quirks mode" dumping a lot of rules from HTML and CSS, trying to guess what the page was supposed to look like, and often rendering the pages quite different from the strict rules.
The declaration is also needed when you want to validate your page with the W3C validator.
This might at first look like a negative point, but it isn't: Placing a correct DTD at the top of the page will force the browser into strictly following the rules set by the defined doctype. It will make it harder for you to push out a page, since the browser will not forgive such things as forgetting a closing tag, or forgetting a semicolon, but let me point this out: Those pages are made for Internet, and even if your audience is of a rather restricted group (like all your visitors will definitely have only one kind of browser), there will be still a multitude of variations. Different versions of that one and only browser, different versions of the O/S maybe, different screen sizes (and who says the browser window will use the full size?), or simply a differently arranged user interface (where will be the taskbar of the O/S, where of the browser?). One cannot grasp all the variations that might come up and therefore it's better to write clean code, free of errors (validated, with DTD), to be at least halfway sure (browsers still might do things wrong, due to bugs or the like) how the pages will look. If you dump the DTD and dump the clean code, every browser might come up with different solutions how to get around your bugs, errors and mistakes.