Even More Style Tags

For those of you who have been through the companion to this tutorial, you will recall that in Chapter 5: Special Effect Tags, I discussed a number of logical style tags (as well as the forced-style tags). For the purposes of clarity and simplicity, I did not cover all of the logical style tags in that chapter, a fact that I intend to remedy here.

Here are the remaining tags, all of which are containers:

Code Example
<CODE>...</CODE>: This tag is used to define (and display) an example of program code, and is usually displayed using a monospaced font. Do not confuse this with <PRE>, below, which is a related but slightly different container.
Keyboard
<KBD>...</KBD>: Used to define text which is input by a user. This would get used a lot in documentation covering a command line-based program or service.
Sample
<SAMP>...</SAMP>: As the HTML specification says, this tag "indicates a sequence of literal characters," which means that the browser will not try to interpret the text in this container, but will simply display it without comment (so to speak).
Variable
<VAR>...</VAR>: VAR is used to indicate a variable name, which is typically only useful when discussing computer programming.

Remember that these are all logical style tags, so the actual display of these elements will vary by browser. You can also see how each tag is rendered by your browser by looking at Example 1.

The last type of special-effect tag, <PRE>, is complicated enough to warrant its own section. So...

Preformatted Text

That's what <PRE> defines: preformatted text. It's a container, and it's a very special one.

Again, those of you who have read my tutorial Introduction to HTML will recall that I spent a lot of time droning on about the fact that whitespace doesn't matter. Extra spaces between words, multiple returns, blank lines-- all of these disappear in an HTML document, due to the structural nature of HTML.

Well, almost. There is an exception to this rule. In a preformatted text block, whitespace does matter. Suddenly, the number of spaces between words, or blank lines between paragraphs, will be seen.

Markup:
   <PRE>
     Now is the time     for all good men
          to come to the aid of          their network...
   </PRE>

Result:
     Now is the time     for all good men
          to come to the aid of          their network...

Thus, it is possible to use preformatted text to achieve otherwise impossible effects, such as aligning columns of numbers. Just insert the right number of spaces, and that spacing will be preserved.

This ability to utilize whitespace does not come without its prices, however. The first, as you can already see, is that the browser uses a monospaced font (that is, one in which all the characters have exactly the same width) to render preformatted text, much as it does for the <TT> tag. Most readers find this a less attractive type of display.

The second price is that the usual browser formatting rules go right out the window. For example, text within a preformatted text block does not flow within the margins of the browser window. So, if I have a really long line of text within a preformatted text block, it will go right off the edge of the screen (check it out). This is obviously not a very good thing.

There are also restrictions on which other HTML tags may be placed inside the preformatted text container, and in what contexts a preformatted text block may occur. Headings are forbidden within preformatted text blocks, as are paragraph tags. In fact, about the only tags allowed inside <PRE>...</PRE> are the anchor tag, the image tag, the line break tag, the horizontal rule, and the various text-effect tags (both logical and forced).

You may place a preformatted text block within the <BODY> container, obviously, as well as <blockquote>, the <DD> tag, forms (which are covered in Chapters 4-8 of this tutorial), and a list item in a list. Unfortunately, that's all.

Chapter 2 Quiz
Next-- Chapter 3: Even More Header Elements
Previous -- Chapter 1: Latin-1 Character Entities
Table of Contents
Tutorial Glossary
Tutorial Index
The HTML Laboratory