XHTML: HTML for the New Era?

Newcomers continually vie for the web language throne. HTML 4.01, which was created in the last century (granted, that's just 10 years ago), has had its detractors. HTML has always been a somewhat sloppy language that allows, among other things, uppercase, lowercase, or mixed case letters in tags (<body> and <BODY> are both correct, for example), and permits unclosed tags (so you can use a single tag without the closing to create a paragraph). While this flexibility may make page writing easier, it also makes life more difficult for web browsers, PDAs, and other places you may want to display your pages.

Enter XHTML 1.0—an improved form of HTML that's coming into widespread use. If you're used to using HTML, don't worry—XHTML isn't a revolutionary new language that takes years to learn. It's basically HTML, but was created as an XML-based language. Like HTML, XML is a tag-based language that lets you organize data in a clear, easy-to-understand way so different computers, operating systems, and programs can quickly and easily exchange data. However, unlike HTML, XML isn't limited to a handful of tags. In fact, XML provides a set of rules for defining your own tags. In addition to forming the basis of XHTML, XML can create everything from RSS feeds to iTunes playlists and then some.

The hot debate is whether HTML 4.01 or XHTML 1.0 is the best approach. Judging by some of the online discussions, you'd think HTML and XHTML are completely different languages, which they aren't. You can build snazzy and functional websites with HTML 4.01 now, and they'll continue to work for years in the future.

If you continue using HTML, be sure to follow the guidelines in Chapter 1. In particular, you must give your HTML page the correct doctype (The Importance of the Doctype), or your CSS will fall apart in certain browsers. Also, you must validate your page (Validate Your Web Pages) to ensure there aren't any typos or other mistakes that can mess up how your HTML displays. You need to do those same things for XHTML, but XHTML is stricter in that it enforces rules that make sure the page works. For example, HTML doesn't absolutely require a doctype; XHTML does.

Tip

If you really want to delve into the innards of XHTML, then check out W3 Schools' XHTML Tutorial at www.w3schools.com/xhtml/default.asp.

The HTML page on HTML: The Barebones Structure would look like this in XHTML:

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

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

<head>
<title>Hey, I am the title of this web page.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<p>Hey, I am some body text on this web page. </p>
</body>
</html>

As you can see, this code looks a lot like HTML. To make an XHTML file comply with XML, however, there are a few strict rules to keep in mind:

Begin the page with a document type (DOCTYPE) declaration. That's the first two lines in the code above. You saw a doctype in the HTML example, but if you look closely, you'll see that the exact code is a bit different—in this case specifying a type of XHTML called XHTML 1.0 Transitional. You'll learn much more about document types—and their importance to CSS—in Chapter 1.
Tags and tag attributes must be lowercase. Unlike with HTML, typing the tag <BODY> is a no-no; when you're writing XHTML, capitalized tags aren't invited to the party.
Quotation marks are required for tag attributes. For example, a link written like this: <a href=http://www.missingmanuals.com> is valid in HTML, but won't work in XHTML. You have to enclose the value of the href property in double quotes: <a href="http://www.missingmanuals.com">.
All tags (even empty tags) must be closed. To create a paragraph in XHTML, for example, you must begin with and end with . Trouble is, some tags don't come in pairs. These tags, called empty tags, have no closing tag. The line break tag is one example. To close an empty tag in XHTML, include a space and a forward slash at the end of the tag, like this: .