XHTML Document Type Definition Nightmare

A DTD (Document Type Definition) states what tags and attributes are used to describe content in an SGML, XML or HTML document, where each tag is allowed, and which tags can appear within other tags

Often when I'm writing web pages for clients I have to include an old DTD type and html from past versions to make the pages compatible in the most browsers.

Since Internet Explorer 5 and Netscape 6, both of these browsers will interpret and render your pages based on the DTD.

To get away from this I typically write pages with this DocType:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">

But... if you're coding for yourself, you should probably use one of these:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The above is good if you have numerous element on your page that wont't validate under the strict DTD and is a mixture of code from new and old.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The above DTD (Document Type Definition) is better. If your document validates there is a good chance that your XHTML will help your sites work better in more browsers and devices, thus reaching greater numbers of readers, now and for years to come.

If you're going to try and convert your exsiting site into STRICT XHTML you may run into a few problems with how new browsers display your markup. Especially, new Gecko based browers such as Mozilla, FireFox and Netscape.

If you are trying to validate it with a strict DTD you will quickly find that the align attribute is, in most cases, not valid. This causes a big problem if you're trying to use TABLES for layout purposes, so your content is still presentable to older browsers.

To get away from <table align="center"></table>:

Use a fixed width table in pixles and use CSS to set the margins to "auto":

The above markup will center your table.

You also can't use the align attribute for paragraphs or headers (<h1></h1> etc...)

Use <h1 style="text-align: center;"></h1>

All tags and attributes need to be written in lowercase.

All tags need to be closed: <br />. The space makes it backwards compatible for older browsers.

the border=0 is no longer supported in <img src="" /> tags. But you can specify it like this

But now before we get to carried away with adding CSS directly inline in the html, if you are using an external stylesheet, you can state the properties and values there. I'm going to exaplin why you would want to do this.

If you have a Gecko based browser (Netscape, Mozilla, Firefox, etc...) visit
http://homebusiness-websites.com/xhtml-strict.html

IE 6 users won't see anything the matter with the page, but looking at it in a Gecko based browser, it looks like a real mess. It validates perfectly except for this test I've used the same alt (not optional under strict DTD -- it is required) description for each image -- which is a no no.

Why is it such a mess? If I use an XHTML transitional DTD it looks fine.

It may have something to do with how some browsers treat the white space used in the "img" tag:

I wasn't able to find any documentation on this but foud a solution:

New subsribers to the Home Business Journal get immediate access to the archives. If you would like to read the rest of this article, please subscribe now.

| Back to Article Index |