Article
XHTML Web Design for Beginners - Part 2
Non-breaking space with
Web browsers may split a set of words onto two lines. Sometimes this is not what you want. The solution is the entity reference , which stands for "non-breaking space".
If you insert a between your words instead of a space, and are careful to include no spaces on either side, that text will be treated as a single line, and will never be broken up. Here's an example:
<p>This is a solid line.</p>
If you view the example in a visual browser, try making your browser window thin to see if you can make the text wrap onto 2 lines. You can't do it! Now, let's try with normal spaces:
<p>This is not a solid line.</p>
This is another element that has no effect outside visual browsers.
Soft Hyphens with ­
Soft Hyphens are used to indicate a point within a word where you'd like it to be split across to two lines if necessary. It simply makes for a slightly nicer appearance when space is limited, such as occasions when you need to display text in a thin column (which we'll be covering later).
To use soft hyphens, you simply insert ­ within the word at the point where you would like the potential split to occur. Here's an example:
<p>I have no idea what antidisestablishment­arianism means.</p>
In a visual browser, if you collapse your browser window so that this long word (which I won't repeat!) is against the right hand edge of the window, then the word should be split onto two lines at the point where the soft hyphen occurs.
As you'd expect, this element has no effect outside visual browsers.
Pre-formatted text with <pre>
Remember when we covered white space in the last section? I told you then that any amount of white space is always collapsed into a single space. Well, there's one exception!
The <pre> element allows you to layout your text in the way in which 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 and below it.
Using <pre> is simple. Let's redo the example we created with <br> above, and use <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>
(Copyright The Trustees of The J.R.R. Tolkien 1967 Settlement 1954, 1966)
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 you can use in your XHTML documents to mark up your text.
In Part 3 of this series, we'll look at XHTML's three different types of lists: ordered lists, unordered lists and definition lists. We'll also see how we can add graphics to our pages, and how we can link our documents together, and to other documents/sites. See you soon!