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.
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 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.
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 are used for two different purposes: "Real" tables, presenting tabular information, such as
| 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:
<table> tag containing a summary
attribute that describes what the table is about.<caption> tag to label the table
as a whole.<thead> tag, to contain the <tr>
and <th> tags that label the columns of the table.
Each <th> tag should have an id
attribute that uniquely identifies it.<tfoot> element to hold the footer of
the table.<tbody> tag, to contain the <tr>
and <td> tags that comprise the data in the table.
Each <td> tag should have a headers
attribute whose value is the id of the corresponding
<th>.<blockquote> to indent paragraphs (unless
you are actually quoting somebody). Instead, use something like
p.indent { margin-left: 40px; } in your CSS.<b></b>. These should be eliminated.<i> (italic) tags; use <em>
(emphasis) instead.<b> (boldface) tags; use <strong>
(strong emphasis) instead.