Article
XHTML - An Introduction
HTML as we know and love it, has for many reasons become rather lax and unruly. If you've diligently tested your Web pages on different browsers only to find that your carefully crafted masterpiece looks great in IE5x, but becomes an illegible monster in Netscape 4x, then welcome to the club.
What can we do?
Well, we could spend all of our time whining about browser conformity, proprietary tags and standards. Or, we could take a pro-active stance and support the World Wide Web Consortium's first recommendation for XHTML: XHTML 1.0
This article takes a "quick start" approach aimed at the HTML author who wants to further their skills, and it concludes with links to more detailed information.
What is XHTML?
According to the W3C:
"XHTML 1.0 is a reformulation of HTML 4.01 in XML, and combines the strength of HTML 4 with the power of XML.
"XHTML 1.0 is the first major change to HTML since HTML 4.0 was released in 1997. It brings the rigor of XML to Web pages and is the keystone in W3C's work to create standards that provide richer Web pages on an ever increasing range of browser platforms including cell phones, televisions, cars, wallet sized wireless communicators, kiosks, and desktops."
Sound good so far? Then read on...
Where do you start?
If you've no experience with XML you could be forgiven for being a little intimidated by it. But if you can code your pages in HTML, you'll be pleased to know that learning XHTML will be extremely easy. It will also provide you with a superb introduction to XML along the way.
Essentially XHTML is just a stricter version of HTML 4.01 with a few considerations that you should be aware of as you mark up your pages.
Three flavors to choose from!
As you may know, the eXtensible Markup Language is not a markup language at all, but a way of defining markup languages by use of a Document Type Definition, or DTD. XHTML is one such language and there are three different DTDs to choose from.
- Strict - disallows use of all deprecated tags and attributes such as the
<font>tag. - Transitional - is far more forgiving and supports all those deprecated yet browser supported tags you most likely use every day.
- Frameset - is exactly the same as the transitional DTD but replaces the document body with frame attributes.
You'll probably want to use the transitional DTD as it provides the most forgiving environment for an introduction to XML and XHTML.
The main differences between HTML and XHTML
The specification requires that your documents be "well formed", which means that you have to pay special attention to certain aspects of your code. Below are the key points you need to be aware of.
1. Nested elements
Firstly you need to tidy up the way you treat your page elements. XHTML does not tolerate incorrect nesting so something like this:
<b><p>I'd probably have gotten away with it too if it weren't for
you pesky W3C folks</b></p>
won't pass muster at the W3C's Validation service but
<p><b>Buffy rules!</b></p>
...will be just fine. The same applies to all your markup tags.
2. Case Sensitivity
Both tags and their attributes are case sensitive in XHTML. The simple and strict rule is that all tags and attributes must be written in lower case. For example,
<A HREF="myPage.html">Some page</a>
will get you roasted alive by the XHTML Validator, but
<a href="wellFormed.html">Well formed page</a>
will work perfectly.
Nick Wilson runs