In learning the basics of XHTML, we will focus on how to use XHTML to convey the structure of our documents to browsers. We will rely (for the time being) on the browser's default presentational style to determine the appearance of our pages.
This page was written to provide students in my CS403 class with a simple sample document that demonstrates the various aspects of structural XHTML we have discussed in class. The primary motivation has been to generate a relatively simple, but realistic, document that not only reviews the concepts presented in lecture, but also demonstrates their use in a "real world" situation.
To get the most out of this document, you should first read it and then study the source that the browser rendered in order to produce it. Use your browser's ability to display the source of a document for this purpose.
The most common method of compartmentalizing ideas within a Web page is to express each idea within its own paragraph, much as you would when writing a research paper or essay.
Note how this document utilizes paragraphs to divide its content into small, easily digestible chunks. Readers on the Web generally do not relish wading through extensive blocks of uninterrupted text. So, breaking each idea into its own separate paragraph is a good first step toward creating more appealing Web pages.
When you examine the source for this document, note how the start and end tags correspond to how the browser treats the text. At the same time, note how the whitespace used to indent and space the source for readability has no effect at all on how the browser treats the text. The browser interprets any sequence of whitespace characters as a single space.
If I had used paragraphs, rather than line breaks, in the footer at the bottom of this page, the browser would have added extra spacing between each line (since that's how most browsers present paragraphs). And as a result, my footer would have used much more space than it needs.
While paragraphs are useful and common, they are not always appropriate.
Conceptually, a paragraph expresses a single idea. However, sometimes a page requires that lines end with a specific word even though an idea in the traditional sense has not been presented.
For example, consider the footer at the bottom of this page. I wanted to list several separate items, none of which could really be considered a paragraph in the conventional sense. If I had used several paragraph elements for these items, I would have been effectively giving the browser false information; calling each line a paragraph simply to get the presentational effect I associate with paragraph elements.
Using structural elements solely for their presentational effects often seems useful in the short term. However, in the long term it generates significant problems and limitations when you set about the task of fine tuning the presentation of your pages. Don't succumb to the temptation!
Note how the headings on this page serve to break it up into several easily identifiable portions. As with paragraphs, this helps break down the psychological barriers that megalithic blocks of text elicit in the minds of many Web users.
Even more importantly, note how the headings help you to quickly summarize and organize the contents of the page, even before you read it in its entirety. On the Web, very few visitors to your pages will be willing to invest the time and energy necessary to read your pages just because they are there. Instead, it's your job as a Web author to entice them read the page, and headings are one of the simplest tools you have to accomplish that.
Because most browsers apply very noticeable presentational effects to headings, it is especially tempting to use headings solely for their presentational impact. But you must resist, or the dark side of The Force will have prevailed!
Did you notice how I used the opportunity to sneak in a level 3 heading there?
When you simply need to group a bunch of text together as a block, and that block does not conceptually represent a paragraph or a heading, you probably want a generic division.
Although the need for them is rare in straight XHTML, these generic divisions can be useful. They become tremendously useful when one begins controlling presentation with CSS.
In this document, you can see one realistic example of a generic division being used. Examine the source of this page and scroll to the bottom. You'll see that the text that forms the footer has been written inside a generic division.
Everything inside the body of an XHTML document should be wrapped inside a container element of some sort. For that reason, I needed a container that would be appropriate for this text. Conceptually, the text in the footer does not qualify as either a paragraph or a heading. It's just a block of text... a perfect place to use a generic division.
Although useful in many situations, headings are not always appropriate.
Sometimes, you need to convey logical divisions within your content that do not warrant being identified with their own heading. For example, below this section, I wanted to insert a footer identifying myself. It would have seemed rather awkward for me to insert a heading that read "Footer" to label that section of the document. So I used a horizontal rule instead.
A horizontal rule is simply a line drawn horizontally across the page. It provides a very obvious division without assigning an identity to the division that follows it.