XHTML - The New Trend
If you've been a web designer for any length of time, you know how quickly technologies come and go, standards change, and how hard it is to keep on top of everything. And now you've probably heard that the lingua franca of the web -- HTML -- is no longer the markup language of choice; instead, the W3C recommends that, going forward, you create all your pages in XHTML.
Luckily for you, learning XHTML (and even converting existing documents from HTML to XHTML) is relatively painless. XHTML is really just a stricter, cleaner version of HTML, with the promise of greater accessibility and flexibility as the web matures.
Why Bother With XHTML?
"But my code works just fine, thank you. Why should I bother switching to XHTML?"
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 (see the XHTML Specification for examples):
<!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. (To learn more about Doctypes, read Matthias Gutfeldt's excellent guide.)
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">
Again, take a look at the specification for more examples.
- 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, just take a look at the source code of this page (and this whole site) -- it's all valid XHTML!
|
Home | Graphic Design | Interior Design | Fashion Design | Web Design | Game Design | Online Design Schools
