Keeping XHTML Error Free

Working with XHTML

New ideasOur CSS positioned templates (and many of our table-based ones, too) use XHTML rather than HTML coding. You may be familiar with HTML, the web's original markup language, but the W3C (World Wide Web Consortium) currently recommends using XHTML instead. This hybrid language looks and works much like HTML, but is based on XML, the web's "super" markup language. XHTML requires a more "logical" document structure. When writing your text for the web, think about logically setting up your content.

<h1>Your Main Topic Heading</h1>
<p>Content that follows your main topic heading.</p>

<h2>Second Topic Heading</h2>
<p>Content that follows the second topic heading.</p>

You want to avoid using deprecated tags to add text to simulate the logical order like <font="7">Your Large Text</font>. If you are concerned about the appearance of your web pages, remember that cascading style sheets (CSS) separate presentation from structure, allowing you to style any element as you wish.

Rules of XHTML

Moving from traditional HTML to XHTML 1.0 Transitional is easy, as long as you observe the following rules:

Open with the proper DOCTYPE and Namespace: XHTML documents must begin with tags that tell the browser how to interpret them. We begin each template page with the following that appears before the opening head <head> tag:

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

Documents must be well formed: This means that all elements must have closing tags and must be properly nested. For example, overlapping tags may work well in most browsers but are not allowed in XHTML.

<p><strong>This is incorrect.</p></strong>
<p><strong>This is correct.</strong></p>

All element and attribute names must be lower case: XML is case-sensitive so because XHTML is an application of XML, it is important that all elements and attributes are lower case. You can no longer have <H1> or <P>, it must be <h1> and <p>.

Non-empty elements must have closing tags: In HTML some elements were not required to have closing tags. For example, a paragraph <p> could be closed by the next paragraph to follow. In XHTML you are required to close all elements, so <p> would be closed by </p>.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Empty elements must also be closed: Some tags to not have corresponding closing tags. Where previously we could use <br> or <hr>, we now need to close these elements by adding a space and a forward slash. So now <br> becomes <br /> and <hr> becomes <hr />.

Attribute values must always be quoted: For example --

<image alt="photo" src="images/photo2.jpg" width="100" height="100" /> is correct.
<image alt="photo" src="images/photo2.jpg" width=100 height=100 /> is incorrect.