Making the move to XHTML

A question that often crops up is whether it's worth switching from HTML to XHTML, and — if so — when and how.

End of the line for HTML

The simple answer is that web designers really have no choice. It's the end of the line for HTML — the current version (4.01) is the last, and all future developments will be made on XHTML and related technologies such as XML. What's important about XHTML is that it insists on stricter, more consistent standards, which will make your pages display faster and more reliably in modern and future browsers. It's also a stepping stone to XML, but that's not quite so important for most web designers, at least in the short to medium term.

Whether it's worth making the switch now is not so easy to answer. It depends on your current level of skill.

Complete beginners

If you've never created a web page before, it may be best to start with XHTML, and miss HTML altogether. It means a steeper learning curve to start off with, but at least you shouldn't learn any bad habits along the way. The difficulty is that most web design books still use HTML, as do virtually all web design programs. You also need to understand HTML itself in case you work with others who've not yet made the switch, or if you ever need to update an existing site written in HTML.

Fortunately, the Worldwide Web Consortium (W3C) that sets the industry standards has made the transition from HTML to XHTML as easy as possible (see the section on differences below).

Those already familiar with HTML

The first priority is to learn to create valid HTML by getting rid of all your old bad habits. Start by putting a Doctype at the top of every web page before everything else, just above the <html> tag. It's best to start with the transitional one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd">

The Doctype tells the browser how to parse your pages, speeding things up considerably. The transitional Doctype allows you to continue using tags and other parts of HTML that are being phased out in favour of CSS. Run your web pages through one of the online validators at the W3C (http://validator.w3.org) or the Web Design Group (http://htmlhelp.com/tools/validator/). You may get a lot of errors to start off with, but don't let that put you off. Browsers let you get away with a lot of mistakes at the moment, but the messages that come from the validator serve as an early warning. Your pages may work now, but if they're invalid, there's a strong chance they may break in future browsers. If you don't understand why your pages don't validate, seek advice in one of the many online forums like that run by Project Seven or the Macromedia Dreamweaver Forum.

The advantage of creating valid code is that your pages should load faster, and stop throwing up mysterious problems. Once you can do that, start getting rid of inline tags, and replacing them with CSS. Then you can make the switch to XHTML in a twinkling.

The differences between HTML and XHTML

XHTML is valid HTML4.01 with a few minor (but important) changes:

All tags are written in lower case
<a></a>, not <A></A>
All tags must be properly nested
This is bold., not
This is bold.
Certain elements cannot be nested inside others — for instance, you cannot have one form inside another
All event handlers are written in lower case
onmouseover, not onMouseOver
All elements require the correct closing tag — no more leaving off the optional or </td> tags
Elements without a closing tag end with />
 , <hr> become , <hr />
Certain attributes (such as "selected" in option lists) need qualifying
for example: selected="selected"
All attributes must be enclosed in quotes
height="100", not height=100
Special characters (such as &) must be represented by their character entities (&)
Embedded JavaScript and styles must not be surrounded by HTML comment tags (otherwise they will be ignored)

A two stage approach

Although these differences are not very difficult to master, they're probably offputting enough for less experienced people. Doing things in two stages is probably less stressful. Dreamweaver MX takes a lot of the effort out of things, and will also convert existing HTML pages, so once you're ready, go for it. The web is already XHTML-ready. Even Netscape 4 will display valid XHTML pages without problems (if you do encounter difficulties with N4.x, the cause almost certainly lies in your use of CSS, rather than XHTML).

The XML declaration

One final word of caution. The XHTML specifications recommend the use of the xml declaration <?xml version="1.0" encoding="iso-8859-1"?> at the start of every page, ahead of the Doctype (the encoding depends on which language you're using — iso-8859-1 is for English and most western European languages). Unfortunately, this forces IE6 into quirks mode, displaying your CSS incorrectly. It's better at the moment to remove it, as long as you ensure that your page encoding is properly declared in a meta tag like this:

If you're using Dreamweaver MX, there's a free extension at www.dwfaq.com that automatically removes the xml declaration from your pages.