The major differences between HTML and XHTML can be broken into
two groups: syntactical and functional. Once browsers get up to
speed, XHTML will not be as forgiving as HTML. We use the future
tense here because right now, XHTML functions much like HTML in older
browsers. To understand how XHTML can render in non- XML-compatible
browsers, see the section titled "Compatibility Issues and Browser
Requirements" later in this chapter. If you're familiar with the
HTML-browser debate, you probably know two things:
n Not all browsers
are alike: Different browsers support different elements and some
proprietary elements of their own. Until recently, browser developers
were not concerned with standards.
n Browsers let
authors get away with murder, theoretically anyway.
If you want to test the previous theories, do a quick test. Create
the following XHTML document in a text editor and save it on your
hard drive with a .htm extension:
<html>
<body>
<h4>This is a heading 4</h4>
<p>Here is our paragraph</p>
</html>
Right off the bat, you should notice a couple mistakes. First,
there's not a head element or a title element (which are both
required for a valid HTML document). Second, the closing body tag is
not present.
After you save the document on your hard drive, open it in your
browser. To open an (X)HTML document in your browser, select File,
Open, click the Browse button, select the document name, and then
click Open. The document should render in your browser without a
hitch, as shown in Figure 4.1.
With XHTML, all bets are off. When you create an XHTML document,
you're instructing the browser to follow XML rules. If you make a
mistake, such as omitting a closing tag or typing element names in
uppercase, your page will not be well formed or valid, and the result
will be an ugly error message. The terms well formed and valid are
essential to XHTML. If you do not know what they mean, see Chapter 2,
"All About Markup."
As mentioned earlier in this section, there are two categories of
differences between XHTML and HTML: syntactical and functional. The
syntactical differences have to do with the structure of the document
(its syntax). As you become well versed in XML (and you will because
XHTML is an XML application), syntax becomes increasingly important.
When we mention XML rules, we're talking about XML syntax rules. One
of the advantages of XML is its standardized-and yes, strict-markup.
This means that the first significant difference between HTML and
XHTML is syntax.
HTML follows its own syntax rules based on a predefined set of
elements (most of which define style or structure), whereas XHTML
must adhere to the syntax rules defined by the XML specification. (We
identify each rule in detail later in this chapter in the "XML Syntax
Rules" section.) With the capability to create your own elements in
XML, minus the capability to manipulate style, XML allows only for
elements that define the meaning and structure of their content. That
alone doesn't do more than HTML. To really take advantage of the
XHTML benefits, you should read Chapter 12, "The Benefits of
Extensibility," and Chapter 13, "Where the Future Leads, XHTML
Follows," and learn more about extending your markup.
The next set of major differences is driven by function. As
discussed earlier, HTML has outlived its usefulness, and XHTML
intends to pick up where HTML left off. Most advantages found in
XHTML actually come from XML. Because XHTML is an application of XML
(which means it follows the rules of XML), it reaps the rewards of
extensibility and portability.
When someone from the XHTML community says extensible, he or she
means that XHTML can be extended beyond its predefined core elements.
With extensibility, other XML applications, such as Scalable Vector
Graphics (SVG) and your very own XML creations, can be incorporated
in XHTML documents.
The second XML advantage is portability. With XML, a single page
can result in multiple outputs. After the markup and content is
compiled into an XML (or in our case, an XHTML) document, various
style sheets can be applied that control different outputs. And,
who's to say that output is only for display. Maybe the data needs to
be sent to a database at another company, with XML. This type of data
transfer is now an option. The idea is to only write and modify the
content once. (Now that is a media we can get behind!) However,
remember that you can't just write an XHTML document and expect it to
start calling up other companies and sharing information; there is
some work involved. The key is that it's possible.
Compatibility Issues and Browser Requirements
Good news: XHTML documents will render in older browsers. There
are a few glitches, but there are simple workarounds that fix the
problems. Here they are, one by one:
n Empty elements
should include a trailing space after the element name and before
/> (for example, <br />).
n Do not minimize
elements that are not defined as empty, even if they do not appear to
contain content. For example, sometimes the p element is used alone
with no content. If this occurs, be sure to write it as
<p></p> and not <p />.
n Avoid using
multiple spaces or line breaks within an element's tag(s). In XML,
using line breaks is common practice. For example:
<book type="paperback"
isbn="99-9999-999-9"
year="1972">
In XHTML, do not
include line breaks, for example:
<link type="text/css" rel="stylesheet" href="style.css"
/>
Note that throughout this book, we insert spaces in markup for
readability purposes only. When you write your markup, be sure to
follow the spacing rules outlined in this section.
This is by no means an exhaustive list. For more information on
compatibility, visit www.w3.org/TR/xhtml1/#guidelines or flip to
Appendix A "XHTML 1.0: The Extensible HyperText Marlkup Language,"
which contains the entire XHTML Specification, including the HTML
Compatibility Guidelines.
XML-Compatible Browsers
There are many XML-compatible browsers that render XHTML documents
perfectly, such as Amaya, Mozilla, and Internet Explorer 5.
n Amaya is offered
by the W3C and boasts support for most W3C standards, including
heavy-duty CSS support. (We like it here at the office.) As far as
popularity goes, however, Amaya is only used by a fraction of the
Web-browsing community.
n Mozilla was
created as an open-source venture, and is incorporated into the most
recent version of Netscape 6. It too boasts support for the most
common Web standards, such as HTML and XML (and therefore XHTML).
Mozilla also includes heavy-duty CSS support.
n Internet
Explorer 5 is Microsoft's premier browser. Although not perfect,
Internet Explorer 5 does support XML. One word of warning, however:
it does not support the full CSS specification, and CSS is important
to XHTML display. The next version of Internet Explorer should
include better CSS support.
For a complete listing of XML-compatible browsers, see
www.xmlsoftware.com/browsers/.