Well, there are a few good reasons. First of all, as you've probably heard, the web is moving towards XML, which shares the same characteristics (well-formed, valid documents) as XHTML. Using XHTML puts you in a great position to take advantage of XML when la revolucion comes. Because XHTML is a cleaner form of markup, you'll reap the benefit of documents which are easier to maintain and update. If everyone is writing tidy, well-formed pages, it becomes much easier to share work and, in a team environment, collaborate without losing yourself in a sea of poorly organized HTML.
XHTML is also more easily transferred between devices -- it's not just for web browsers on PCs. It can be used to structure pages for handheld devices, cell phones, and other devices. As a result, it's more accessible than HTML; now users reaching your site via screen readers or voice browsers can access your content easily (which will help you comply with Section 508, the government's recent web accessibility legislation).
Cleaning Up Your Code
Converting your existing HTML pages to XHTML is surprisingly easy. Really! All you have to do is follow these few guidelines and voilá... you'll be XHTML-compliant and the envy of all your neighbors.
- Start with an XHTML Doctype and Namespace
Every XHTML document should begin with a Doctype declaration that looks something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
This tells the browser that your document is an XHTML document and, in newer browsers, will tell the browser what mode to use for rendering your document.
After the Doctype declaration, you can start your document with your trusty <html> tag, BUT, you must include an XHTML namespace declaration like this:
<html xmlns="http://www.w3.org/1999/xhtml">
- Use lowercase for all tag names
XHTML requires that all tags be lower-case. Instead of <STRONG> or <Strong>, you must now use <strong>.
- Put quotes around all attribute values
Instead of writing <p class=fudge>, now you must write <p class="fudge">. (This one should help improve the readability of your code, too.)
- Close all tags, even empty ones
Every XHTML tag should have a closing mate -- i.e., there should be a closing </p> for every <p>, and a closing </li> for every <li>, etc.
For empty tags, such as <img> and <hr>, you should add a forward slash before the end of tag. So those tags would now look like <img src="img/logo.gif" /> and <hr />. (Don't forget the space before the forward slash -- that helps older browsers that don't understand XHTML tags.)
- Validate your code
When you're done, don't forget to double-check your work at the W3C (X)HTML Validator. The validator will check your page and make sure that it conforms to the XHTML specifications -- that your page is structured correctly, that the tags are used properly, etc. Since XHTML is all about clean, well-formed code, this is a very important step.
And that's it! Not so painful now, is it. And with tools like HTML Tidy, you can convert entire sites to XHTML with little or no trouble. If you need any extra guidance, check out the links below or take a look at the source code of this page (and this whole site) -- it's all valid XHTML!
Get your diploma or degree in web development! Check our list of schools and colleges offering programs in web development.
