XHTML: HTML for the New Era

To keep pace with the times, an "improved" version of HTML, called XHTML is finding its way into more and more Web sites. If you already understand HTML, don't worry—XHTML isn't a revolutionary new language that takes years to learn. It's basically HTML, but with stricter guidelines.

The hot debate's whether HTML or XHTML is the best approach. To judge by some of the online discussions, you'd think HTML and XHTML are completely different languages. They aren't. You can build snazzy and functional Web sites with HTML now and will probably be able to continue in the future. If you continue using HTML, the most important thing is that you follow the guidelines discussed in Chapter 1: in particular, an HTML page must use the correct "Doctype" (Section 1.3) or your CSS will fall apart in certain browsers, and it must "validate" (Section 1.2.4) so that you know for sure 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 because it's stricter than HTML it enforces rules that make sure the page works (for example, a Doctype isn't absolutely required in HTML; it is with XHTML).

XHTML's the future of Web page languages: there won't be any future versions of HTML, but there's a lot of work being put into creating the next generation of XHTML. (Don't hold your breath, though—it'll be years before there's wide support in browsers for it.)

Note

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

The HTML page code shown in Section 3.3 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=iso-
	8859-1" />
	</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 declaration. That's the first few lines in the code above, starting with <!DOCTYPE. The document type declaration is the most important part of an XHTML page, as you'll see in the next section.

  • 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 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 <p> and end with </p>. Trouble is, some tags don't come in pairs. These tags, called empty tags have no closing tag. The line break tag's one example. To close an empty tag, include a forward slash at the end of the tag, like this: <br />.

What the Doctype Does

In the example XHTML code, everything below the <head> is exactly the same as the HTML page you looked at earlier. The information that begins the page, however, is very different. Each XHTML page begins with a few lines that state what type of document the page is and which standard it conforms to. This document type declaration—doctype for short—also points the Web browser to files on the Internet that contain definitions for that type of file.

In this case, it merely says that the page is a type of XML document, in particular, an XHTML document. The doctype plays a key role in how a Web browser displays CSS—in fact a missing or incorrect doctype's enough to make Internet Explorer completely mishandle the presentation of a CSS-heavy Web page. You'll learn much more about doctypes—and their importance to CSS—in Chapter 1.

Note

This may seem like a lot to take in if you're relatively new to building Web pages. Don't worry—it is. In Chapter 1, you'll also learn a cool tool for making sure you're creating correct XHTML—the W3C Validator. It checks your page and lets you know if everything's OK. Even more importantly, you'll learn how to create CSS-friendly XHTML.

Get CSS: The Missing Manual now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial