Conclusion

Validating XHTML

As covered in this tutorial, XHTML documents must conform to certain rules. The W3C provides an online validation service where you can type in a URL of a page to be validated, or upload a file stored locally on your computer for validation. To use this service, you must have an active connection to the Internet. The utility I use is A Real Validator, which can be used to validate pages offline. It is shareware, so you can try before you buy. It is an inexpensive utility (cost $25), and has been in my toolkit now for a number of years.

I recommend that you validate your pages. Once all of the major browsers can properly support the application/xhtml+xml content type, updating the content type from text/html will result in faster rendering of the page. The browser does not have to go through all the extra parsing required in HTML to process the markup and display the contents. This does have one drawback, however. If your page is not valid, it will not display -- another reason to validate your pages.

Level of Elements

In validating your XHTML, you may get an error message like:

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

XHTML elements contained within the body element generally fall into two different categories -- block-level and inline. The block-level elements can contain inline elements and some other block-level elements. These block-level elements are usually rendered beginning on a new line.

Inline elements are usually contained within block-level elements and other inline elements.

There are those elements that are considered block-level that can contain other block-level elements. This can be somewhat confusing at first, which is why I highly recommend having a reference available such as the Web Design Group's, which contain this kind of information.

Of the elements introduced in this tutorial, the following are block-level elements:

The header elements (h1 through h6)
table
The list elements (ul, ol, dl)
address
blockquote
div
p
pre

Some of these elements (ordered and unordered lists can be nested, for example) can be contained within other block-level elements.

Inline elements introduced in this tutorial:

a
abbr
acronym
br
code
em
img
map
q
span
strong
sub
sup

Other elements introduced in this tutorial can only be contained within specific elements:

Table structure elements (caption, colgroup, col, thead, tbody, tr, tfoot) - only contained within table. The col can also be contained within a colgroup element. The tr element can also be contained in thead, tbody and tfoot.
Table cells (th, td) - contained only in tr.
li - contained only in ul or ol elements.
dt and dd - contained only in dl.
area - contained only in map.

XHTML Rules

The document must contain a !DOCTYPE declaration for XHTML.
Tagnames must be in lower case.
The document must contain html, head, body and title elements.
The document must be well-formed:
- All elements must be nested under the html element.
- All elements (tags) must be closed.
- Elements must be properly nested.
Attributes must be quoted.
Attributes cannot be minimized.

Accessibility

The W3C has published guidelines to follow to better prepare marked-up content for those using accessibility devices.

Some of the guidelines are very detailed, but I try to keep in mind the following when coding a page:

Always view a page in "plain mode" (without images and styles) to make sure the content is understandable and navigable without those visual aids.
Provide text-based navigation elements as an alternative to image map navigation
Provide alt and title attributes for images.
Use images conservatively. If an image is used to convey information, provide a text-based alternative if possible.
Avoid "click here" type links.
Avoid using color as the only means to convey information.
Test your pages in different browsers and at different resolutions.
Validate XHTML and CSS stylesheets

Exercise - A Page on Saturn

As an exercise, here is a text file with content to be marked up for that page on Saturn. As with the solar system main page, there is an image (Courtesy NASA/JPL-Caltech) to be included:

There isn't an image map needed for this page, but there should be text navigation links to allow the user to return to the main page or view the details of another planet.

The finished page along with the main solar system page, will be used as the XHTML documents to apply styles to in the CSS tutorial.

In Closing

Hopefully after going through this tutorial, you will be comfortable in marking up text content in XHTML. There are still other aspects of XHTML that have not been covered, such as forms and embedding movies, Java applets, and sound into your pages. This tutorial, in fact, has been marked up using only the tags covered here.

XHTML 1.1