Section 2.4. XHTML | Creating Web Sites: The Missing Manual

2.4. XHTML

The current version of HTML (as implemented by all modern browsers and taught in this book) is HTML 4.01. HTML 4.01 became an official standard at the end of 1999, so it's definitely not a new kid on the block. This raises an interesting questionin all the years since HTML 4.01 hit the Web, why haven't there been more changes?

The fact is, HTML 4.01 has essentially finished its evolution. There isn't much more that can be improvedat least not without radically changing the way the language is now. In the years since 1999, developers have largely concentrated on extending HTML with browser plug-ins for new types of content (like Flash movies) and building massive Web applications that can generate HTML on the fly.

That doesn't mean the world of Web standards has been quiet. The next big thing is XHTML , a revised version of HTML that incorporates some of the philosophy of another standard called XML (Extensible Markup Language). XHTML is a stricter form of HTML, so it doesn't allow sloppy mistakes (like improperly nested tags) that browsers tolerate happily. However, the real goal of XHTML isn't to hassle lazy Web developers. Instead, because XHTML is more consistent, it makes life easier for Web search engines and scaled-down Web browsers on specialized platforms (like telephones, pocket computers, and even kitchen appliances). And because XHTML has XML underpinnings, it's great for hardcore computer programmers that want to create and analyze Web pages using development tools.

So why aren't we all focusing on XHTML? Even though XHTML has been around for several years, HTML 4.01 is still the undisputed popularity champ. It's more compatible with older browsers and works well with piles of popular Web editors. Most Web page creators still pass on XHTML because it doesn't add any new features. At the time of this writing, top sites like Amazon, eBay, and Google are still XHTML-free. In fact, XHTML is used only when companies have powerful Web application software that's smart enough to serve up different types of Web pages (HTML or XHTML) depending on how capable the requesting browser is.

2.4.1. Creating a Valid XHTML Page

In this book, you won't explore XHTML. However, if you're interested, it's just a short step up from HTML.

2.4.1.1. The basics

First of all, whereas a few HTML conventions are guidelines (that is, they're optional), in XHTML, they're unbreakable rules. These rules are recommended in this chapter and followed throughout this book, but they're not actually enforced by HTML:

Always include the <html>, <head>, <title>, and <body> tags.
Use proper nesting so that different start and end tags don't overlap (see Section 2.2.3).
Write all of your HTML tag names and attributes in lowercase letters .
Understand the difference between block elements and inline elements (see Section 5.2). Inline elements (like images and links) must always be placed inside a block element (like the paragraph).

Along with these rules are a few new wrinkles that you don't follow in ordinary HTML.

First of all, you need a namespace that indicates that you're using XHTML tags. Adding this ingredient is easyjust replace this <html> tag at the beginning of your document:

 <html>

with this:

 <html  xmlns="http://www.w3.org/1999/xhtml"  >

Second, you need to add a space and a slash character to the end of every empty tag. That means instead of this:

 <hr>

use this:

 <hr />

And instead of this:

 <img src="leepark.jpg">

use this:

 <img src="leepark.jpg" />

Tip: The single space immediately before the / > characters ensures that the tag still works with browsers that don't understand XHTML.

To make life even more interesting, there are some rules for specific tags. For example, the <img> tag always needs to provide some alternate text, which is used in cases where the picture can't be downloaded (see Section 7.1.2). Here's a valid <img> tag that's ready for XHTML:

 <img src="leepark.jpg" alt="Lee Park Portrait" />

2.4.1.2. The document type definition

All XHTML documents must start with something called a document type definition (DTD). This is a cryptic code that's inserted at the very top of your document, just before the <html> tag. The DTD tells the world what type of XHTML you're using. The key difference between different flavors of XHTML is whether they support old-fashioned HTML features that XHTML gurus frown upon.

For example, if you have pure XHTML that's unadulterated by any old-fashioned HTML trickery , you can use the strict DTD. That means you'll insert this at the top of your page:

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

In order to be considered strict XHTML, your page can't use the quirky formatting hacks that are present in HTML. Instead, it needs to use the more powerful and better organized style sheet standard (which is introduced in Chapter 6). Most of the examples in this book can be converted into strict XHTML, because they use style sheets. For the most part, you won't see any old-fashioned HTML tricks unless they're difficult to duplicate by other means.

If you decide you want the flexibility to use some of the unpopular parts of HTML, you can use the transitional DTD, which looks like this:

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

The word transitional hints at the fact that this approach is only a temporary fix. Later versions of XHTML won't give you this option.

Finally, you can use the frameset DTD when you want to create a Web page that uses frames (see Chapter 10).

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

Frames are a handy feature for splitting a browser window so it shows more than one page at a time. Many Web gurus refuse to deal with frames due to their quirks and limitations, preferring to build high- powered Web applications that custombuild each page instead. However, frames still play an important role for do-it-yourself designers.

2.4.1.3. A valid XHTML page

Here's a version of the r sum page reworked as a strict XHTML 1.0 document. The changes are highlighted in bold.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head> <title>Hire Me!</title> </head> <body> <p>I am Lee Park. Hire me for your company, because my work is <b>off the hizzle</b>.</p> <img src="leepark.jpg"  alt="Lee Park Portrait" /  > <p>My skills include:</p> <ul> <li>Fast typing (nearly 12 words/minute).</li> <li>Extraordinary pencil sharpening.</li> <li>Inventive excuse making.</li> <li>Negotiating with officers of the peace.</li>     </ul> </body> </html>

When you request this page in a browser, you won't notice any changes from the HTML version. However, you are now officially on the cutting edge (for a few minutes, anyway).

Note: XHTML pages still use the file extension .htm or .html .

You won't find much more about XHTML in this book. However, if the standard intrigues you, check out the quick tutorial at www.w3schools.com/xhtml. If you'd like to test your pages to see if they meet the rules of XHTML, you can use the handy online validator at www.htmlhelp.com/cgi-bin/validate.cgi.