Headings and Document Hierarchy
In the example above, we use an h1 element to show a major heading. If we wanted to include a subheading beneath this heading, we would use the h2 element. There are no prizes for guessing that a subheading under an h2 would use an h3 element, and so on, until we get to h6. The lower the heading level, the lesser its importance and, as a rule, the smaller (or less prominent) the font.
With headings, an important (and commonsense) practice is to ensure that they do not jump out of sequence. In other words, you should start from level one, and work your way down through the levels in numerical order. You can jump back up from a lower-level heading to a higher one, provided that the content under the higher-level heading to which you've jumped does not refer to concepts that are addressed under the lower-level heading. It may be useful to visualize your headings as a list:
- First Major Heading
- First Subheading
- Second Subheading
- Another Major Heading
Here's the XHTML view of the example shown above:
<h1>First Major Heading</h1>
<h2>First Subheading</h2>
<h2>Second Subheading</h2>
<h3>A Sub-subheading</h3>
<h1>Another Major Heading</h1>
<h2>Another Subheading</h2>
Paragraphs
Of course, no one wants to read a document that contains only headings -- you need to put some text in there. The element we use to deal with blocks of text is the p element. It's not difficult to remember: p is for paragraph! That's just as well, because you'll almost certainly find yourself using this element more than any other. And that's the beauty of XHTML: most elements that you use frequently are either very obvious, or easy to remember once you're introduced to them.
For People who Love Lists
Let's imagine that you want a list on your web page. To include an ordered list of items, we use the ol element. An unordered list -- called 'bullet points' by the average person -- makes use of the ul element. In both types of list, individual points or list items are specified using the li element. So we use ol for an ordered list, ul for an unordered list, and li for a list item. Easy!
To see this markup in action, type the following into a new text document, save it as lists.html, and view it in the browser by double-clicking on the saved file's icon.
Example 2.2. lists.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lists - an introduction</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
<h1>Lists - an introduction </h1>
<p>Here's a paragraph. A lovely, concise little paragraph.</p>
<p>Here comes another one, followed by a subheading.</p>
<h2>A subheading here</h2>
<p>And now for a list or two:</p>
<ul>
<li>This is a bulleted list</li>
<li>No order applied</li>
<li>Just a bunch of points we want to make</li>
</ul>
<p>And here's an ordered list:</p>
<ol>
<li>This is the first item</li>
<li>Followed by this one</li>
<li>And one more for luck</li>
</ol>
</body>
</html>
How does it look to you? Did you type it all out? Remember, if it seems like a lot of hassle to type out the examples, you can find all the markup in the code archive, as I explained in the preface. However, bear in mind that simply copying and pasting markup, then saving and running it, doesn't really give you a feel for what's happening -- it really will pay to learn by doing. Even if you make mistakes, it's still a better way to learn (you'll be happy when you can spot your own errors and fix them for yourself). When displayed in a browser, the above markup should look like the page shown in Figure 2.9.
There are many, many different elements that you can use on your web page, and we'll meet more of them as our web site development progresses. As well as the more obvious elements that you'll come across, there are others that are not immediately obvious: what would you use div, span, or a elements for? Any guesses? Don't worry, all will be revealed in good time.
Figure 2.9. Using unordered and ordered lists to organize information
Commenting your Web Pages
Back in the garage, you're doing a little work on your project car and, as you prepare to replace the existing tires with a new set of low-profile whitewalls, you notice that your hubcaps aren't bolted on: you'd stuck them to the car with super glue. There must have been a good reason for doing that, but you can't remember what it was. The trouble is, if you had a reason to attach the hubcaps that way before, surely you should do it the same way again. Wouldn't it be great if you'd left yourself a note when you first did it, explaining why you used super glue instead of bolts? Then again, your car wouldn't look very nice with notes stuck all over it. What a quandary!
When you're creating a web site, you may find yourself in a similar situation. You might build a site, then not touch it again for six months. Then, when you revisit the work, you might find yourself going through the all-too-familiar head-scratching routine. Fortunately, there is a solution!
XHTML -- like most programming and markup languages'allows you to use comments. Comments are perfect for making notes about something you've done and, though they're included within your code, comments do not affect the on-screen display. Here's an example of a comment:
Example 2.3. comments.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Comment example</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
<p>I really, <em>really</em> like this XHTML stuff.</p>
<!-- Added emphasis using the em element. Handy one, that! -->
</body>
</html>
Figure 2.10 shows the page viewed on-screen.
Share and Enjoy:
