An XHTML Introduction
If you've never heard of XHTML, don't worry, you certainly aren't alone. XHTML stands for eXtensible Hyper Text Markup Language.
You can think of it as applying XML to HTML. In fact, XHTML is HTML defined as an XML application. Over time you will see more of the web moving from HTML to XHTML. One main goal of XHTML is to accomplish separation of content from style. What this means is that HTML files will be strictly for content, and CSS will be used to add style to the pages. When we use XHTML, we end up with stricter, and much cleaner code than standard HTML.
Naturally, the question, "why do we need XHTML?" arises. There are many answers to this, depending on who you ask. Some say that the advent of mobile devices capable of internet access necessitates a new standard to which web sites should adhere. Others argue that from an accessibility standpoint, current HTML fails miserably (on screen readers and other such tools have a hard time sifting through classic HTML pages, especially badly formed ones).
For me, while I do see the merit in the above arguments, I simply feel that the more rigid structure and emphasis on conforming to a standard set of rules that XHTML prescribes just makes sense.
If you've been designing web pages long enough, surely you'll remember when Netscape and IE were in fierce competition for the browser market. HTML was in a state of utter disarray. It was very difficult to produce pixel perfect layouts without first using browser detection, and then redirection to a separate version of your page. That was cumbersome and inefficient. While XHTML won't solve all these problems, it's certainly a step in the right direction.
What Is XHTML?
XHTML is really just a stricter and cleaner form of HTML. Ultimately, the goal of XHTML is the separation of content from style. This means that what we want to move away from tags like <font> and <center> which are tags that are used to style pages (as opposed to a tags like <p> which merely holds content and give a document structure). Instead, cascading sheet styles (CSS) will be used to apply the formatting to our data. For the developer, this is great news. Using CSS, the look of a single page, or a whole web site can be changed by just editing one CSS file. A developer could have multiple CSS style sheets, either to change the appearance of the site, or to apply to different mediums. For example, there could be one style sheet for when the page is displayed on a browser, and another when it's printed. On the printed one, we might hide all dark backgrounds, for example.
XHTML Document Type Definitions (DTDs)
There are 3 main version of XHTML currently available: XHTML 1.0, XHTML 1.1 and XHTML 2.0 (which as of the writing of this, hasn't even been authored!). We'll discuss XHTML 1.0 here. XHTML 1.0 comes in three "flavours" or Document Type Definitions (DTDs), commonly called doctypes. The first is called XHTML 1.0 Transitional and is the loosest interpretation of XHTML. As its name suggests, it's designed to bridge the gap between current HTML and the XHTML implementations of the future. For designers who are use to HTML, XHTML 1.0 Transitional will be very easy to move to. The second doctype is XHTML 1.0 Strict and as it's name implies, is a stricter interpretation of XHTML 1.0. What this means is that some tags and syntax that were allowed in XHTML 1.0 Transitional will no longer be valid in the XHTML 1.0 Strict DTD. The final doctype is XHTML 1.0 Frameset, which is used when you want to create pages with frames. Frames are quickly becoming obsolete, so my advice would be to avoid them if at all possible.
The DTD is the first thing that must appear on an XHTML page. However, it is not XHTML itself, and therefore doesn't need a closing tag (discussed later). The code for the 3 different XHTML 1.0 DTDs looks like this:
XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
One of the preceding DTDs MUST appear as the first element of any valid XHTML 1.0 page.
Transitional/Frameset DTD vs. Strict DTD
Basically, as the name suggests, the strict DTD is just a stricter interpretation of XHTML. In terms of writing XHTML, this means that the Strict DTD allows fewer tags that are considered to be presentational elements. The following deprecated tags are allowed in the Transitional and Frameset DTD, but are not allowed in the Strict DTD:
<font><u><center><s><strike><isindex><iframe><noframes><dir><menu><basefont><applet>
Several attributes are also removed from the Strict DTD, most notably:
<body>cannot contain the attributeslink, alink, vlink, text, bgcolororbackground- The attribute
bgcoloris also forbidden on<table>,<tr>and<th>tags - The attribute
borderis forbidden on<img>and<object>tags, but still allowed for<table> - The attribute
languageis forbidden in<script>tags - The attribute
nameis forbidden in<form>and<img>tags (deprecate in favor of the attributeidanyway) - The attribute
noshadeis forbidden in<hr>tags - The attribute
nowrapis forbidden in<td>and<th>tags - The attribute
targetis forbidden on<a>,<area>,<base>,<form>, and<link>tags
Choosing a Doctype
Choosing a doctype will be the first step you need to take when you want to convert your existing pages to XHTML. You should choose one doctype for your whole site, rather than have certain pages be of one DTD, and others of another DTD. You should use XHTML 1.0 Strict if you want very clear separation of content and presentation. Strict will be easier to adopt if you're starting your site from scratch, whereas if you're converting an existing site, the Transitional DTD will likely be easier for you to adopt.
For the purposes of this article, we'll use the XHTML 1.0 Transitional DTD. We do this because for most web designers, the transition from HTML to XHTML will be very natural if this DTD is used. As for the frameset DTD, in my opinion, frames should be thought of as a relic of HTML. If your site still uses frames, it's time for a redesign. There are very few cases where you absolutely NEED frames. A little creativity in design should allow you to ditch them all together.
Even if you are considering moving from HTML straight to XHTML 1.0 Strict, you can use the transitional DTD as a stepping stone.
Conclusion
Hopefully now you have a better idea of what XHTML is. It may seem like a daunting task, but putting in the effort now to learn how XHTML differs from HTML will pay dividends in the long run.
Regardless of which DTD you end up choosing, making the leap to XHTML will be a step in the right direction. When you're ready to being converting your site, check out the Converting to XHTML in the tutorials section.
Other Resources
Converting HTML to XHTML (thebws.com tutorial)
XHTML Tutorials (w3schools.com)
XHTML FAQ (w3.org)
Minimum XHTML 1.0 Document Tests (tantek.com)
- 132 reads