Getting Started With XHTML Conversion

Pages: 1 | 2 | 3

Deciding on a Standard

Why XHTML at all? It's an evolving standard, designed to bring pages closer to the ideal of being easily parsed by any Internet-capable device. Designing for XHTML and CSS implies paying closer attention to the separation between content and layout than we used to with HTML 4. Take heart, though: you don't have to completely redesign your entire site. For sites like mine that still depend on features found in HTML 4, the XHTML 1.0 Transitional standard is the most appropriate choice. For new sites with relatively little content, or existing sites where HTML hasn't been extensively used for layout purposes, XHTML 1.0 Strict may be easily implemented. No matter which standard you pick, it's wise to apply the same standard across your entire site. Mixing standards across different groups of pages will cause maintenance problems, and greatly increases the time you'll spend testing content in various browsers.

Locating Your Content

Take time to carefully document where all your pages reside. Many sites use multiple methods for presenting web content. ClassHelper hosts pages with SHTML (server side include), HTML, and XHTML extensions, along with a large number of pages that are dynamically generated from Perl scripts. Make sure you know where all your content is located to avoid missing chunks of your site in the conversion. As you work, keep track of what's been done.

Starting the Conversion

Well, here we go! Start by converting large batches of pages that use SSI or PHP header/footer files. Pick a page and change the header file's first two lines to match the following (for XHTML 1.0 Transitional):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

For sites using the XHTML 1.0 Strict standard, use this code:

<!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" xml:lang="en" lang="en">

Note that these headers specify English as the langauge (note the "lang" entry); change the code to your langauge code as appropriate. Run a page that uses this SSI header through the W3C Markup Validation Service and the CSS Validation Service and examine the results. You're likely to have a lot of errors, but that's normal. Many errors are "cascading" in nature; an error in one tag causes lots of later portions of the page to fail validation. Fixing the most common problems will eliminate most errors. Here are some common culprits:

Using "<br>" instead of "<br />" - XHTML tags must be closed, either explicity or by adding a forward slash to the end of a single tag. Break tags are frequently offenders in this area, as are image tags. Note that some browsers will fail to render the tag correctly unless there is a trailing space in it as shown.
Improperly using "<p>" tags - Paragraph tags must be closed, and are meant to separate, well, paragraphs. They're not intended to provide a lazy man's double line break.
Lack of alt-text in image tags - XHTML requires alt text for all images. Make the text describe the image itself; keep in mind the fact that some user agents don't show images, and depend on the alt-text for meaningful content.
Using "&" instead of "&" - Ampersand (and other) characters must be converted to the proper XHTML character entities.
Tables or lists inside paragraph tags - You can't do this in XHTML. Change your layout as needed.
Uppercase characters in tags - All tags must be in lowercase in valid XHTML pages.
Conflicting character types - Make sure your page's meta tag for the page character type matches the one set in your web server's configuration file for HTTP headers.

If you're monetizing your site using ad networks like ADSDAQ or AdBrite, be sure to convert ampersand characters in the ad code to "&" XHTML entities. Once you've corrected all the errors in your header and footer files, it's time to focus on the actual page content.

Continue: Batch Page Conversion and Testing