XHTML and CSS: The Right Way to Build Web Pages

HTML has evolved quite a bit from its humble origins. Unfortunately, this evolution has been rather willy nilly. The result has been pages that are problematic in many different ways. The World Wide Web Consortium has tried to impose some order on HTML with its recommendations for building pages with XHTML and CSS.

Bad HTML
Let's start by saying what's wrong with HTML. Suppose you have a couple hundred web pages with glossary terms and definitions. The terms should be bold, in a slightly larger-than-normal font, and navy blue. The definitons should be in a green, italicized, sans-serif font.

You will have to add thousands of tags to make make all the colors and fonts show up correctly, thereby ballooning the file sizes of your pages and making the source code of those pages very difficult to read. And what if your boss then asks you to change the navy to periwinkle and the green to aqua? You're in for a very long (and boring) day.

That's a pretty simple example. It only gets worse from there. Open up a news site like The Washington Post and look at all the junk in there. It's almost impossible to read! Besides hundreds of presentational tags, I counted over fifty tables, each with a bunch of "tr" and "td" tags and attributes.

So HTML pages are often large (i.e. slow to download) and unwieldy (i.e. hard to maintain).

Good HTML
Here's where web standards come to the rescue. The W3C's recommendation for "strict" HTML eliminates virtually all presentational tags: no more font tags, no more tags to insert a line break, no more tables for page layout, etc.

All the responsibility for how a page should look is now moved to Cascading Style Sheets. These styles are stored in separate documents that can be applied to multiple HTML files. So now when the boss wants glossary items changed from navy to periwinkle, you only have to change one CSS document, and your whole web site is updated.

This also gives you the ability to mix and match HTML files and style sheets. You could have one style sheet for users with non-graphical browsers, another stylesheet for PDAs, another for printers, etc. You could even have seasonal stylesheets to give your site an autumn or spring look. How about that! If you want to see it in action, check out the CSS Zen Garden, a site that demonstrates how the same HTML can be radically changed with CSS.

And all this involves using LESS HTML. In other words, you use many fewer tags, but you can do much more. You end up with files that download faster (because they have less markup), are easier to maintain (because content is separated from presentation), are more flexible (can be more easily adapted to different requirements) and are more likely to meet accessibility guidelines. Less is more!

Of course this means you have to break some old coding habits. But who wants to keep a bad habit?

XHTML
XHTML is HTML that follows the syntax rules of XML. In fact, XHTML documents are XML documents. That means that you can use an XML parser to search, modify, repurpose and do all the other cool stuff that you can do with XML. The strict hierarchical structure of XML documents also means that we can have CSS do things that until now have been doable only with client-side scripting. You can even make hierarchical menus with some well organized XHTML code and just a few simple lines of CSS.