DTDs for Beginners

DTDs, Document Type Definitions, are rarely used by web designers, but they are absolutely essential in HTML code.

A DTD, Document Type Definition, is an identifying tag that belongs at the top of every web page. They perform a twofold task - on the one hand, they help you write valid code, and on the other they help browsers to render that code correctly. How, you may ask, can a tag do this? Read on.

You will doubtless be aware of the basic structure of a web page, if you are a designer. There are two main sections, within a document (you might not know it, but the <html> section can come after the <body> section, if you want):

<html> <head> Header Data </head> <body> Visible Content </body> </html>

The above will probably be very familiar to you. Hopefully, you will be aware of the hundreds of other tags available to you as well. But did you know that the following can be both correct and incorrect?

<P align="center">Text here</P>

In XHTML, which is case sensitive, the above is gibberish - a tag that has no meaning. In HTML, it's a centered paragraph.

How does a browser know which it should pay attention to? Should it assume that you are writing HTML, and render the above as a centered paragraph? If you were writing XHTML, then no, it shouldn't, because a mistake has been made. It should do nothing. But how does the browser know what language you are writing and how to display it?

This is where the DTD comes in handy. A DTD is a tag that is placed within a page before anything else (including white space). It must be at the very front of the very first line of every page you write. Once there, and correctly formed, your DTD can then tell the browser what language you are writing. If you have written your code correctly, and you have a proper DTD in place, the browser will then render your page according to the standards laid down by the W3C, in most cases.

If you do not include a DTD, browsers will use "Quirks Mode" to render a page. Designed to accomodate poor coding and old hacks, "Quirks Mode" gives you little control and if your page is rendered in "Quirks Mode", it will look different in every single browser. All the hard work you've put in to styling your page and creating a beautiful new site will seem to have been somewhat wasted when you realise that many people cannot see the page properly because it has rendered badly.

So a DTD is essential to any page. It is used by validators to determine what language you are writing, so it can check your code (and if you're a web designer who doesn't validate your code, you should change your ways ... or consider a new career). It is used by browsers to render pages. And if you know what language you are writing, you can use the correct tags and markup for each part of your page, to help it become semantically correct.

DTDs are formed of two parts, and look a bit like this:

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

The above is a DTD for XHTML 1.1. Some languages have subtle variations (for example, HTML can be Strict (for well-written pages), Transitional (for pages with deprecated tags or not-quite-perfect code), or Frameset (for pages with Frames)), and some, like XHTML 1.1 do not. Each of these variations will have it's very own DTD as well. Some require upper case "HTML" and some lower case. Each of them can be found on the W3C site, and a short list of the common ones is included on the following page.

Adding a DTD

If you are creating a web page, your DTD should reflect the language you intend to use for that page. Add it before anything else - let it be the very first thing you write (before even empty lines), like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">; <html lang="en">

It is difficult adding a DTD to a page after it has been written, especially if you are using CSS for the look and layout, as when a browser comes out of "Quirks Mode" and renders a page correctly, much of your positioning, as well as padding and margins, may look wrong.

If you are adding a DTD to a page that has already been written, you are going to have some problems. That's a fact. That doesn't make it any less worthwhile adding one. Apart from anything else, you can be very sure you'll remember to add it first on the next site you write. You may want to go for a "Transitional" DTD, which allows you some flexibility (Transitional DTDs allow deprecated tags, like "<b>", and are relatively forgiving, unlike Strict ones).

If you haven't validated a page before (and if you don't have a DTD, chances are you haven't been able to validate your code), you'll probably be looking at something like the HTML 4.0 Transitional DTD, below. Add that to the top of a page, and validate with any one of the many web page validation tools available. Fix the bugs you find, then look at your page in a browser. If things are wrong, it will be down to code - CSS or HTML - and should not take too long to correct.

Once each of your pages has a proper DTD, you can rest easy, knowing that programs fetching and displaying your pages know which language they are written in and which set of rules they conform to. If your page validates, you know the code you have written is pretty close to accurate, although of course a validator cannot check the semantics of a document. Last, you know that, as the browsers now know what language to display, there is a good chance that everyone visiting your site is seeing more or less the same thing.

Common DTDs

The following is a list of those DTDs used often on the web. The chances are that, if you do not currently have a DTD on your pages, it should be one of the below.

  • XHTML 1.1
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • XHTML 1.0 Strict
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • XHTML 1.0 Transitional
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • XHTML 1.0 Frameset
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • HTML 4.01 Strict
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • HTML 4.01 Transitional
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • HTML 4.01 Frameset
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  • HTML 3.2
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
  • HTML 2.0
    <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">