Put XHTML 1.0 Strict and Transitional to work

XHTML 1.0 comes in three flavors, and it requires more than a sense of taste for developers to tell them apart. This article discusses the Transitional and Strict flavors of XHTML and how to leverage them appropriately.

As its name suggests, XHTML—which is considered the successor to HTML 4—is a combination of HTML and XML. By combining the power of XML and HTML, XHTML makes Web content more accessible to devices such as phones, handhelds, and televisions. XHTML 1.0 is broken up into what the W3C refers to as three flavors: Strict, Transitional, and Frameset. In this article, I focus on the two most useful, Strict and Transitional.

XHTML 1.0 Strict
XHTML 1.0 Strict is the most demanding XHTML flavor, but it provides the cleanest structural markup. Strict code is free of any markup used to define layout. It uses cascading style sheets (CSS) to control the presentation. This separation of structure from presentation is what makes XHTML Strict flexible enough to be displayed on different devices. The reliance on CSS to control presentation can be problematic for developers, because it's not a good choice for Web content that needs to be viewed on devices or in browsers that do not recognize style sheets.

XHTML 1.0 Transitional
XHTML 1.0 Transitional is the more forgiving XHTML flavor. Unlike Strict, which completely separates structure from presentation, Transitional allows you to use tags to control the look of your markup. Its goal is bridging the gap between HTML-based pages that allow the markup to control the presentation and XHTML Strict, which does not. Its main benefit is that it overcomes Strict's CSS dependence. Transitional pages are still accessible to users who use older browsers or who are using devices that don't recognize style sheets.

How to choose?
The choice between Strict and Transitional depends on a couple of factors:
  • Audience. If you find that much of your audience uses older browsers that don't recognize style sheets, Strict may not be the right answer—although I would make the case that supporting standards is more important than backward browser compatibility at this point. If most of your audience is using the latest versions of Internet Explorer, Netscape, Opera, or Safari, Strict is the best long-term choice.
  • Current code. If you already use CSS and your HTML doesn't contain a lot of markup that controls presentation, you can make the leap to Strict.

Getting started
XHTML 1.0 is based on HTML, so it can be interpreted by existing browsers. That means you can immediately start using XHTML. In addition, tools are available that can help you use it whether you're converting an existing site or starting from scratch.

Converting an existing site
The easiest way to convert an existing Web site to XHTML is using a converter such as HTML Tidy. This open source application fixes HTML markup errors and provides you with clean XHTML code. You can also use Dreamweaver MX to convert existing HTML files to XHTML 1.0 Transitional. After opening an HTML file in Dreamweaver, select File | Convert | XHTML. If Dreamweaver encounters code it can't convert, such as <img> tags without alt text, it provides a report at the end of the conversion process. From there, you can manually repair the offending code. Figure A provides a peek at the Dreamweaver process.

Figure A
Converting HTML to XHTML in Dreamweaver MX

Starting from scratch
When I built my first XHTML-based site, I used Dreamweaver MX. It has nice features for producing compliant XHTML. For example, when you're creating a new HTML file in Dreamweaver MX, there's a Make Document XHTML Compliant option (Figure B). This ensures that Dreamweaver will adhere to the W3C standard when generating tags.

Figure B
Dreamweaver MX New Document dialog box

Having a clean document to begin with is great, but what happens after you've added your own code? That's where Dreamweaver's Clean Up XHTML option comes into play (Figure C). It evaluates the code and ensures it is XHTML compliant. If you have any noncompliant code, Dreamweaver MX tries to repair it.

Figure C
Dreamweaver MX's Clean Up XHTML function

Full-flavored development
Whether you're converting existing code or building a site from the ground up, XHTML 1.0 can deliver significant benefits—including greater accessibility for a variety of devices and, in the case of Strict, complete separation of structure and content. If you keep in mind the constraints and advantages of each flavor and use tools such as HTML Tidy and Dreamweaver, you can start making the most of XHTML's power and flexibility.

Editor's Picks

Free Newsletters, In your Inbox