Taking Advantage of DOCTYPE

Now that you know what a DTD is and what it does, what is DOCTYPE and how can you use it?

Now we come full circle. Most of the time you can just accept any DOCTYPE statement at the top of your code. For example, if you use Dreamweaver, it will insert a DOCTYPE statement in the default code for any new page you create. But if you want or need some extra control, you can specify a different DOCTYPE.

Why Use a Different DOCTYPE

We are now entering some very esoteric territory. Most developers and designers do not have to worry about this level of control. I recommend that if you use HTML, then you should use the HTML 4.01 Transitional DOCTYPE. And if you use XHTML, then use the XHTML 1.0 Strict DOCTYPE. But if you are doing some more advanced CSS and JavaScript that relies on very specific Web browser behaviors, then you might need to delve further into different among the various DOCTYPES.

Understanding Document Structure Rules

A recent example: I am writing a JavaScript program to automagically turn a HTML nested list into an expandable tree menu. This type of functionality can be created by adding specific CSS and JavaScript to each list item in the nested lists. But that can be complicated for some people and error prone, and I want my script to be very easy to use and reliabe. Therefore, I decided that there would be a single requirement for my tree menu script: add an id to the topmost <ul> element, such as <ul id="my_menu">. Then my script would find the nested list and automagically add all the needed CSS classes and JavaScript event handlers needed.

For my script to work, the nested lists need to be in a certain structure. For people to make sure my script will work in their pages, they would need to make sure their HTML code followed the standards. And they can do that by using the correct DOCTYPE. That's what DOCTYPES are all about: using the right standard.

Of course, that meant that I need to follow the correct HTML standard as well. So I created a new document in Dreamweaver, which added a DOCTYPE statement to the top of my HTML code. I then pasted the URL to the DTD into my browser, which prompted me to save it to my computer. I saved it, opened it, and used it to understand which tags are allowed in which order in nested lists. With that information, I could see an assumption I had made about nested lists was incorrect.

I had assumed that I could nest a <ul> element inside another <ul> element, like this:

The HTML DTD and the XHTML DTD do not allow a <ul> element to contain another <ul> element. A <ul> element can contain exact only one thing: a <li> element. So I had to change my code to use this type of nested structure:

And it everything turned out, this actually made my JavaScript code much simpler, because now the nested list is a child of a list item instead of a child of another list. Exactly why that made it easier is beyond the scope of this article, but the idea is that following standards makes code more reliable. Hey, I did say this section got into more esoteric stuff, right?

Browser Modes

In some cases, a Web browser will interpret your HTML and/or CSS differently, in accordance with the standards specified in the DOCTYPE. For example, Internet Explorer and Firefox have a standards compliant mode and a quirky mode. The mode the browser uses to interpret and render your code depends on the DOCTYPE you specify. The best thing you can do is use a consistent DOCTYPE among all your pages, so the code you write creates the same behavior in all your pages. Trying to track down and understand the different between browser modes is less than fun. In fact, they're subtle and not documented very well, if at all. But here is some additional reading to help get you started.