XHTML – Part III

We take up from where we left off in XHTML – II.  In this section we will look at XHTML relating to text, covering:

• 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>.

 It is important to remember that all elements should be used for their meaning and not their visual effect.  This will make your site much more accessible to disabled users and those who are using alternative browsers, such as, Personal Digital Assistants and in-car browsers.

Headings with <h1> through to <h6>

Long documents need to be split up into sections to be usable.  To mark headings in your XHTML there are six elements, each relating to deeper levels of sub-headings as the number goes up.  The six elements are:

•  <h1>,
• <h2>,
• <h3>,
• <h4>,
• <h5> and
• <h6>. 

Always start with <h1>, followed by <h2> for sub-headings, <h3> for sub-sub-headings, and so on.  If, you start with <h1> don’t go straight to <h3>, or start with <h2>.

Earlier, web designers did start with <h2> or <h3> to get a visual effect of smaller text which <h1> did not offer but, as already mentioned this can be achieved with style sheets.  So, it is not a valid reason for starting your headings with anything other than <h1>.

Headings are block level elements with space above and below them.  Using heading elements to mark headings ensures users understand your document structure.  Including helping get higher search engine rankings, as search engines understand better what the document is about by examining the headings.

Take a look below at a sample three level document.  From it, you an work out what a document with deeper levels would look like.

<h1><b>XHTML Web Design for Beginners: Introduction</b></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> 

Generally, most XHTML documents should have only a single <h1> element.  Don’t use more than one unless you are sure they are two separate topics and there is good reason to have them on the same page.  If, two topics are on the same page, it means they are connected.  You should have a single <h1> describing both topics and then <h2> for each sub-topic.

Subscripts and Superscripts with <sub> and <sup>

Subscripts are letters or digits which appear smaller and at the bottom of the line e.g. 2 in H₂O.  Superscripts are again smaller and appear at the top e.g. th in 15^th February. To mark subscripts and superscripts in XHTML, <sub> and <sup> elements are used.  For example:

<p>The symbol for water is H_20.</p><p>

This example was written on the 13^th of February.</p> 

Line Breaks with <br>

When writing documents, if you wish to indicate that a new line should be started without closing a paragraph, use the <br> element.  <br> is an empty element so the empty element syntax must be used by writing it as <br />.  For 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 /></p> 

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

Non-breaking space with &nbsp;

Web browsers sometimes split a set of words onto two lines, which you may not want.  Using the entity reference  , which stands for non-breaking space can solve the problem.

If you insert a   between your words instead of a space, with no spaces on either side, that text will be treated as a single line without being broken up.  Here’s an example:

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

Soft Hyphens with &shy;

­Soft Hyphens indicate a point in a word where you would like it to be split on to two lines.  It makes for a nicer appearance when space is limited, as text in a thin column. To use it, simply insert it in the word at the point where you would like the potential split to be.  For example:

<p>I have no idea what antidisestablishment­arianism means.</p>

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 onDown from the door where it began.<pre>

 Summary

That’s it for text elements.  What is left is three different types of lists i.e. ordered lists, unordered lists and definition lists.  As well, adding graphics to your pages and how you link your documents together and to other documents/sites remains to be looked at. 

Advertisement