XHTML in a Nutshell
  1. What is XHTML?
  2. Rules, Rules, Rules
  3. Ditch the deprecated tags

XHTML in a Nutshell

Page 2

Rules, Rules, Rules

As previously mentioned, XHTML has rules that HTML does not. Overall, they're straightforward and easy to follow.

Documents must begin with the proper DOCTYPE and Namespace

Have you ever looked at the source of a page and found that it began in something like this?

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

This is a DOCTYPE and Namespace. Selecting the appropriate DOCTYPE is important, and without it your page will not validate. But due to the amount of detail, DOCTYPEs are discussed in a separate article. For the time being, the doctype shown above should suffice for your XHTML page. The DOCTYPE is placed before the page's initial html tag, at the very beginning of the document.

All tags - even empty tags - must be closed

Say goodbye to the carefree days of leaving your p and li tags open. Where HTML used to look like this:

<p>XHTML, why do I love thee?
<ul>
<li>Thy quoting and thy nesting is complete
<li>The casing of thy radiant tags petite
<li>Thou art well-formed as XML ought be!
</ul>

The XHTML version looks like this:

<p>XHTML, why do I love thee?</p>
<ul>
<li>Thy quoting and thy nesting is complete</li>
<li>The casing of thy radiant tags petite</li>
<li>Thou art well-formed as XML ought be!</li>
</ul>

Even empty tags such as img, br, and hr must now be closed. <hr> and <br> become <hr/> and <br/>, and <img src="wtr.jpg" alt="Walker, Texas Ranger"> becomes <img src="wtr.jpg" alt="Walker, Texas Ranger"/>

Another important thing to keep in mind is that in XHTML, the alt attribute is required when using the img tag, although leaving the alt defined as empty quotes is perfectly okay.

Attributes cannot be minimized

Attribute minimization refers to attributes with no values or implied values. So <option value="zoolander" selected>Derek Zoolander</option> becomes <option value="zoolander" selected="selected">Derek Zoolander</option> and <input type="checkbox" name="anchovies" checked> becomes <input type="checkbox" name="anchovies" checked="checked" />

Make sense? Good. Let's move on.

All tags must be rendered in lower case

A simple enough rule - simply quit using <P>, <Body> and <FORM> tags, and replace them with <p>, <body>, and <form>. Nothing to it.

All attribute values must be enclosed in quotation marks

Another easy one. Just use <img src="SpongeBob.gif" alt="" height="50" width="50"/> instead of <IMG SRC="SpongeBob.gif" HEIGHT=50 WIDTH=50> Getting the hang of it? You should note that file names with capitalization are allowed, since file systems are often case-sensitive. Just keep those tags and attributes lower-case.

All tags must be properly nested

What does properly nested mean? It means that when you use multiple tags, you must close them in the opposite order in which you opened them.

Correct: <p><b>Hello!</b></p> Incorrect: <p><b>Hello!</p></b> Correct: <p>I like <a href="http://del.icio.us/">Del.icio.us</a> a <i>lot</i>.</p> Incorrect: <p>I like <a href="http://del.icio.us/">Del.icio.us</a> a <i>lot.</p></i>

Name is replaced with ID

When giving names to your tags, you may be accustomed to using the name attribute. In XHTML, you should use the id attribute instead.

Title Required

The head of your document should always include a title tag. Not that we're accusing you of leaving title tags out of your html documents. We'd never do that.

And those are the essentials to authoring a XHTML document. There are excellent, if somewhat archaic resources available at w3.org and xhtml.org. But keeping your site cutting-edge is about more than just using xhtml.