Home > Articles > XHTML Web Design for Beginners: Text That Says Something 2

XHTML Web Design for Beginners: Text That Says Something 2

skip to navigation

This section of the site features articles published between 2002 and 2004. They remain here for reference purposes and may contain information that is out of date.

Article Index

Text That Says Something 2

In this section we will be looking 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 will be covering:

Before we start I would like to re-iterate an important point, all elements should be used for their meaning and not their visual effect. You can make any element look any way you want using style sheets, and we'll be covering it later on. So please, do yourself a favour and use elements for the reason they're intended.

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

So now that rant's over and done with let's get on with it.

Headings with <h1> through to <h6>

Any document longer than a few sentences needs to be split up into sections to be usable. This is not a concept invented for the web, it was probably conceived not long after writing was invented.

To mark headings in your XHTML there are six elements that each relate to deeper levels of subheadings as the number goes up. For clarity the six elements are:

You should always start with <h1>, followed by <h2> for sub-headings, <h3> for sub-sub-headings. you get the idea. You should never start with <h1> and then go straight to <h3>, or start with <h2>.

In the past Web designers have started with <h2> or <h3> because they wanted the visual effect of smaller text than commonly offered by <h1> but, as already mentioned (getting sick of it yet?), this can be achieved with style sheets and is not a valid reason for starting your headings with anything other than <h1>.

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

It is important that you use the heading elements to mark your headings as it ensures users of all user agents can understand your document structure. It also helps you get higher rankings in search engines as the search engines have a better idea what the document is about by examining the headings.

Here's a sample three level document, I'm sure you can work out 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 have only a single <h1> element. If you decide to use more than one then you should be sure that they are two separate topics and you have a good reason for having them on the same page. If two topics are on the same page then usually they are connected, and you should have a single <h1> describing both topics and then <h2>s for each sub-topic. It is very rare, if at all, that a page should have two <h1> elements.

A user agent for the blind will often use headings as a way of giving the user an overview of the document so they can decide which part they wish to hear.

Subscripts and Superscripts with <sub> and <sup>

Subscripts are letters or digits which appear smaller and at the bottom of the line such as the 2 in H2O. Superscripts are again smaller and appear at the top such as the th in the 13th 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 are writing your documents you may want to indicate that there should be a new line started 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>

View example 3

This is an element that has no effect outside visual browsers.

Non-breaking space with &nbsp;

Web browsers may split a set of words onto two lines. Sometimes this is not what you want. The solution is the entity reference &nbsp; which stands for non-breaking space.

If you insert a &nbsp; between your words instead of a space, with no spaces on either side, that text will be treated as a single line and never be broken up. Here's an example:

<p>This&nbsp;is&nbsp;a&nbsp;solid&nbsp;line.</p>

View example 4

If you view the example in a visual browser try making your browser window thin and see if you can make the text go on to 2 lines, you can't. Now try with normal spaces.

<p>This is not a solid line.</p>

View example 5

This is another element that has no effect outside visual browsers.

Soft Hyphens with &shy;

Soft Hyphens are used to indicate a point in a word where you would like it to be split on to two lines if that is necessary. It simply makes for a nicer appearance when space is limited such as when you have text in a thin column (which we'll be covering later).

To use it you simply insert it in the word at the point where you would like the potential split to be. Here's an example:

<p>I have no idea what antidisestablishment&shy;arianism means.</p>

View example 6

In a visual browser, if you collapse your browser window so that the long word (which I won't repeat) is against the right hand edge of the window then it should split the word onto two lines at the point where the soft hyphen occurs.

This is another element that has no effect outside visual browsers.

Pre-formatted text with <pre>

Remember when we covered white space in the last section and I told you that it is always collapsed into a single space? Well there's one exception, the <pre> element allows you to layout your text in the same way you want it to appear in a visual user agent. <pre> is a block level element which to remind you means that it has space above it and below it.

Using <pre> is simple, let's redo the example we did with <br> above using <pre> instead:

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

View example 7

You've guessed it, this is another element that has no effect outside visual browsers.

Summary

That's nearly it for text elements, hopefully you now understand most of the elements and entity references that you can use in your XHTML documents to mark-up your text.