Migrating to XHTML

A Brief Guide to Making the Leap

Brett Stimmerman

http://socket7.net

This presentation can be printed as a handout that includes further information.

Part 2 of 5 in a series available online at http://socket7.net/presentations.

XHTML

What is XHTML?

XHTML is essentially HTML 4.0 with with the addition of key features present in XML. These features are what give XHTML its power. Not only are valid XHTML documents easier for computers to read, they're also easier for us humans to read, and debug. XHTML may hit a little hard at first if you're not yet familiar with XML. But only at first.

So far, you've learned that XHTML has a role in designing with Web Standards. Hopefully, this crash course in XHTML will put aside any fears of switching.

For more general background info on XHTML, see the first presentation in this series, Web Standards Primer.

HTML + XML = XHTML

XHTML introduces XML-like behaviour

Why All These Rules?

XML is a Brother From Another Mother

Since XHTML is the fusion of HTML and XML there should be no lack of familiarity here. But something is a bit different now. It's easier for humans to read. Because all tags and their attribure are lowercase, it eases confusion when viewing the source. All tags must be closed, and their attributes enclosed in quotes. This strict enclosure rule is necessary to empower the document to be read by any device that understands XHTML. It provides a way to maintain consistency between devices. If just one little thing is off - an incorrect DOCTYPE*, for example - strange things can happen.

You will be keeping stricter code, with less tolerance for mistakes. Mistakes happen to be exactly want you to avoid in the first place. Luckily, keeping your tags and attributes lowercase and your tags and attribute values closed (or enclosed) an is a snap with the use of the W3C's XHTML Validator. It does some of the debugging for you, like picking up on a tag nesting error. Not only will it find any errors, it also may suggest how to fix them. And it's free.

There's more on the W3C Validator a little later on in this presentation.

*For more on DOCTYPES and why they are important, Zeldman does a great job [http://www.alistapart.com/articles/doctype/]

Simple XHTML Document

XHTML as source and as rendered in a browser

The sample XHTML as rendered in a browser 

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

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <title>Simple XHTML Document</title>
 </head>
 
 <body>
 
  <h1>Simple XHTML Document</h1>
 
  <h2>Unordered List</h2>
  
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 
  <h2>Simple Form</h2>
  
  <form id="sampleForm" method="post" action="splform.cgi">
   <p>
    <label>First Name:</label> 
    <input type="text" name="firstName" />
   </p>
   <p>
    <input type="submit" value="Submit" />
   </p>
  </form>
  
 </body>
 
</html>

In this example, we see that the document meets the requirement for minimal tags included (Doctype, <html>, <title>, and <body>. All tags and attributes are lowercase, as well as attributes being properly enclosed. All tags have opening and closing tags, and in the case of empty tags such as <input />, they have been properly terminated with a forward-slash.

This is a basic example, and is very plain. But since XHTML doesn't need to know how to look, that's ok. It's through CSS that we'll apply presentation style to our document structure. CSS will be discussed in future presentations.

For more information on XHTML, see the last slide in this presentation for a list of recommended resources.

Validating XHTML

Validation saves you headaches. Always Validate.

The W3C HTML Validator works with many versions of HTML and XHTML, and has the following benefits:
  • Locate markup errors
  • Avoid browser's 'Quirks' mode
  • Save debugging time
  • Ensure maximum usability

Bookmark: W3C HTML Validator

The W3C HTML Validator allows you to check for errors in your markup that might lead to problems. When browsers encounter a page with even the slightest error, modern browers may enter a 'Quirks Mode' that can produce unexpected results, and your site's design may seem to be 'broken.' If you regularly validate your XHTML, and something's 'broken' (and your CSS is valid, too!), it saves you lots of debugging time.

Right away, the Validator stands to teach you many real-world lessons on the workings of XHTML, and is a recommended resource to bookmark, and utilize daily.

There is also a similar CSS validation service. It is also free.

XHTML Assignments

Excercise What You Know

The assignments above are simple, but they are real, hands on experience manipulating XHTML documents.

Futher Reading

More Thoughts, References and Resources

Each of these sites contain massive amounts of information. These specific links are meant to reinforce some of the topics discussed in this presentation, educate you further on related topics, or give you a first hand look at these topics in action. You may browse each site further if you'd like.

You should bookmark any sites throughout the presentation that are labeled as such, and start to create a collection of 'Web Standards' bookmarks. You will need these resources handy soon, and you'll be using them a lot.

It's Over!