XHTML

XHTML is a reformulation of HTML as an XML (Extensible Markup Language) application. It will display in your browser identically to the equivalent HTML. XHTML 1.0 can be seen as a descendant of HTML 4.01, but is technically stricter because of XML's influence. You might want to use XHTML if there is any chance you will need to reprocess your content; for instance, to send it to a PDA or a printer. XML's stricter syntax rules make automatic processing of XHTML much easier and cheaper than ordinary HTML.

DOCTYPE

XHTML uses three document types:
  • Strict: Display is fully separated from content and structure using CSS.
  • Transitional: Permits the use of deprecated tags and attributes in markup for controlling display.
  • Frameset: For pages that establish frames; not relevant to accessibility.

In XHTML code, a document type must be declared via the correct DOCTYPE.

A DOCTYPE includes a full URL (a complete web address) which tells browsers to render your page in standards-compliant mode, treating your XHTML, CSS, and DOM as you expect them to be treated.

Using an incomplete or outdated DOCTYPE – or no DOCTYPE at all – throws these same browsers into "Quirks" mode, where the browser assumes you've written old-fashioned, invalid markup and code per the depressing industry norms of the late 1990s. In this setting, the browser will attempt to parse your page in backward-compatible fashion, rendering your CSS as it might have looked in Internet Explorer 4, and reverting to a proprietary, browser-specific DOM. (IE reverts to the IE DOM; Mozilla and Netscape 6 revert to who knows what.)

California State Standard DOCTYPE

The California State standard is the XHTML 1.0 Strict DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Warning icon Warning: Code the above DOCTYPE exactly as shown!

check box Icon Note: Some editing tools like TextMate will apply the correct DOCTYPE for you automatically - but you have to select the correct one first!

Back to Top

Tag Changes

In XHTML, all tags must be closed. For example, non-empty tags (tags which have content between an opening and closing tag) such as <p> and <li> must be closed using the corresponding </p> and </li> tags. Empty tags (tags which do not have content between an opening and closing tag) such as <img> and <br> must be closed with a trailing forward slash "/".

Before:

<img>
<br>
<hr>

After:

<img />
<br />
<hr />

Check Box Icon Note: All tags in XHTML are written in lowercase.

Attribute Changes

All attribute values must be enclosed in double quotes.

Before:

<img src=./images/photo1.jpg>

After:

<img src="./images/photo1.jpg" alt="Still Life with Candle" />

Check Box Icon Note: The image tag above has been shown with an alt attribute as is required for Section 508 compliance.

Back to Top

Code Validation

All XHTML code should be checked for conformance to W3C Recommendations and other standards. Online validation is available at validator.w3.org

Check Box Icon Note: The W3C online validation tool is very good, but not perfect. You should employ more than one method of checking to ensure clean code, including manual proofreading.

Deprecated Features

The tags and attributes at the link below are deprecated in XHTML 1.0. Deprecated elements are allowed in XHTML 1.0 Transition, but not allowed in XHTML 1.0 Strict.

Deprecated Elements in XHTML 1.0

Back to Top

Online XHTML Resources

The following are online resources to support the web developer in transitioning to XHTML:

  • HTML Tidy (tidy.sourceforge.net): An automated HTML processor.
  • The New York Public Library Online Style Guide (www.nypl.org/styleguide/index.html): An excellent guide to adopting standards-based markup.
  • QuirksMode.org (www.quirksmode.org): The personal and professional site of Peter-Paul Koch, freelance web developer in Amsterdam, the Netherlands. It contains more than 150 pages with CSS and JavaScript tips and tricks, and is one of the best sources on the web for studying and defeating browser incompatibilities.
  • A List Apart (www.alistapart.com): Explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards.
  • The Web Standards Project (www.webstandards.org): A grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.