Adding Ajax

Continuing the Conversion: Element by Element

Converting a page to XHTML and CSS is one major change, but there are a host of smaller, easier changes to make before the page validates as XHTML. These changes will make the page elements accessible for script access, which I'll be demonstrating throughout this book.

Tip

There are a number of tools that can assist you in cleaning up your web pages and converting them from HTML to XHTML. A popular tool used for this purpose is HTML Tidy, available at http://tidy.sourceforge.net/.

In the early days of the browser, one of the first items people wanted to control was the font. If the entire page were black and white, with font family and size based only on the type of element, our sites would have been too uniform and far too dull (though it would have been easy from a designer's perspective, not to mention fully accessible).

To provide for page customization, a few new HTML elements were introduced as the language developed, including one of the most notorious of all bad elements: blink. This element caused objects (text, images, etc.) to blink on and off. It has become universally hated and is a poster child for separation of page markup and presentation. Luckily, people only toyed briefly with blink, but another element that was widely used (and is still used) is font.

The font element gives designers the ability to specify a font family, size, and color:

<font size="4" color="blue" face="arial">
Some text
</font>

The font element lets us make our text more distinctive, but it does have a drawback: if we want to make a change to the font in our web content, we have to hunt down the use of font in all of our web pages and make the change manually. This can make page maintenance excruciating.

With the advent of CSS, the push is on to remove the use of font (and it has disappeared, more or less, from most pages). If the font element is present in your web sites or applications, you'd be wise to remove it and use a stylesheet setting instead. The following is the CSS setting for the font of a specific element:

#test { font-family: arial; font-size: 4em; color: #0000ff }

Other position- and style-specific elements have been deprecated or conflict with the use of Ajax and should be removed. Among these are:

center

This element is used to center objects. Use CSS to achieve this effect instead.

menu

This element is used to create menu lists. This effect should be replaced using unordered lists (UL).

Strike

This element creates strikethrough text (use CSS or DEL).

dir

This element is used to create a directory list and should be replaced using UL.

Applet

This element was used to include Java applets, but you should use object now.

The best way to determine whether a page contains deprecated elements is to set the DOCTYPE to the specification you want to support and then run the page through the validator. You will be notified by the validator if there are any unsupported elements.

Another aspect of HTML that is not compatible with XHTML is the use of tag closure with elements that may or may not have a terminating end tag. For instance, the img element has no end tag, as all the information about an image is included in the element tag. In XHTML, this tag should be closed with a forward slash just before the closing bracket:

<img src="some.jpg" alt="alternative text" />

When adding Ajax, it's especially important that elements in a web page are properly closed; otherwise, you may get unexpected side effects when you begin to add dynamic effects. Among the more commonly unclosed elements are paragraphs (p) and list items (li). Closing them may seem like a minor headache, but it's one that may prevent much larger headaches later on.

So, what happens once you've eliminated the obvious problems? Will all web browsers look and act the same? Oh, we can only wish.