CIT 597 Guidelines for Writing Good XHTML
Fall 2008, David Matuszek

This page is about writing good XHTML, not about writing legal XHTML. For the latter, see the XHTML basics page. There is one addition that needs to be made: In addition to the Document Type Definitions listed on the XHTML basics page, there is now a DTD for XHTML 1.1, as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

If you are familiar with HTML, here's the main thing to remember about XHTML: Anything you want to do to control how your page looks should be done in CSS, not in XTML.

Where to put CSS

CSS styles should be put in a separate file (typically named style.css) and used by all the closely related documents in your web site. This gives you a consistent theme, so that your pages all look like they belong together.

If, for a certain page, you want to tweak the style just a little bit, you can put your changes within the document's <head>. But try to avoid doing this; often, you can put your tweaks as a new class in your CSS file.

If you want to change the appearance of just one element in a page, it is possible to add the style attribute to its tag. This means that your XHTML now contains appearance information, and that is exactly what we are trying to avoid.

Headers

Headers are used to break your document up into sections and subsections.

In HTML, the choice of a header <h1> (largest) through <h6> (smallest) is often made to get a header that looks the "right size." In XHTML these should always be properly nested: <h2> headers should only be used within <h1> headers, <h3> headers should only be used within <h2> headers, etc. You can use the CSS to adjust the size and other appearance factors of headers.

Images

All <img> tags should have an alt attribute. When the page is read aloud (as is necessary for vision-impaired users), the contents of the alt attribute will be read aloud, in place of the image. Hence, alt should describe the image, for example, alt="cover of the textbook".

For purely decorative images, for example using colored balls in place of bullets, use alt="".

Tables

Tables are used for two different purposes: "Real" tables, presenting tabular information, such as

Characteristics of different browsers
Browser Platform independent Standards compliant
Compiled by David Matuszek
Firefox 3 Yes Yes
Opera 9 Yes Yes
Safari No Yes
Internet Explorer 8 No No

and tables used only to lay out sections of a page. For example, here is some text laid out in two columns. Strictly speaking, this is an appearance consideration, and should not be done at all in XHTML.

A table used only for layout purposes should use only <table>, <tr>, and <td> tags.

A table used for tabular information should use:

Miscellaneous