XHTML Web Design for Beginners - Part 2

Text That Says Something #2

In this section we'll look at more of the elements (and a couple of entity references) in the XHTML arsenal that relate to text, further to those covered in the section "Text That Says Something".

Specifically, we'll cover:

• Headings with <h1> through to <h6>,
• Subscripts and Superscripts with <sub> and <sup>,
• Line breaks with <br>,
• Non-breaking space with  ,
• Soft Hyphens with ­, and
• Pre-formatted text with <pre>.

Before we start, I'd like to re-iterate an important point: all elements should be used for their meanings, and not the visual effects they generate. You can make any element look exactly the way you want using style sheets (we'll be covering this topic in some detail later on).

So please, do yourself a favour and use elements for the reason they're intended.

There are many benefits to this approach, the most important being that it makes your site much more accessible to disabled users, and those who use alternative browsers such as Personal Digital Assistants and in-car browsers. It also helps you attain a suitable search engine placement.

So now that rant's over, let's get on with it!

Headings with <h1> through to <h6>

Any document that's longer than a few sentences needs to be split up into sections if it's to be usable. This concept was not invented specially for the Web -- it was probably conceived soon after writing was invented.

There are 6 elements you can use to mark headings in your XHTML. As the number associated with the element increases, so does the level of depth of the subheading to which that element is applied. The six elements are:

• <h1>
• <h2>
• <h3>
• <h4>
• <h5>
• <h6>

You should always start with <h1>, followed by <h2> for sub-headings, <h3> for sub-sub-headings, and so on. You should never start with <h1> and then jump straight to <h3>, or start with <h2>, for example.

In the past, Web designers started their headings with <h2> or <h3> tags because they wanted the visual effect of smaller text than was commonly offered by the <h1> tag. However, as we've discussed, the desired effect can be achieved with style sheets, so this is no longer a valid reason for starting your headings with any other tag than <h1>.

Headings are block level elements, and, as you'd expect, have space above and below them.

It's important that you use the heading elements to mark your headings, as this ensures visitors using all kinds of user agents can understand your document structure. It also helps you achieve higher rankings in search engines, as the search engines can gain a better idea of what your document is about by examining the headings.

Here's a sample three-level document. I'm sure you can work out from this, what a document with deeper levels would look like.

<h1>XHTML Web Design for Beginners: Introduction</h1>          
<h2>Introduction</h2>          
<p>This article is for readers who have either no prior experience...</p>          
<h3>Colour</h3>          
<p>I have used colour in the example...</p>          
<h3>No Programs</h3>          
<p>I will not be showing you how...</p>

View example 1.

In general, most XHTML documents should include only a single <h1> element. If you decide to use more than one, be sure that they are two separate topics, and you have a good reason to include them on the same page. If two topics appear on the same page, usually they're connected. Ideally, you'd have a single <h1> that described both topics, and then use <h2>s for each sub-topic. Circumstances in which a page should have two <h1> elements are very rare.

A user agent for the blind will often use headings as a way to give the user an overview of the document, so they can decide which part they wish to hear. The proper use of heading tags is therefore of vital importance from accessibility and usability standpoints.

Subscripts and Superscripts with <sub> and <sup>

Subscripts are letters or digits that appear smaller than the rest of the document's text, and at the bottom of the line such as the 2 in H₂O.

Superscripts are again smaller than the rest of the text, and appear at the top of a line, such as the "th" in the 13^th of February.

To mark subscripts and superscripts in XHTML you use the <sub> and <sup> elements respectively. An example should make it clear:

<p>The symbol for water is H<sub>2</sub>0.</p>          
<p>This example was written on the 13<sup>th</sup> of February.</p>

View example 2.

Line Breaks with <br>

When you're writing documents you may want to start a new line without closing a paragraph. To do this you can use the <br> element. <br> is an empty element, so you must ensure that you use the empty element syntax by writing it as <br />.

Here's an example:

<p>          
       The Road goes ever on and on<br />          
 Down from the door where it began.<br />          
 Now far ahead the Road has gone,<br />          
 And I must follow, if I can,<br />          
 Pursuing it with eager feet,<br />          
 Until it joins some larger way<br />          
 Where many paths and errands meet.<br />          
 And wither then? I cannot say.          
</p>

(Copyright The Trustees of The J.R.R. Tolkien 1967 Settlement 1954, 1966)

View example 3.

This element has no effect outside visual browsers.