Keep Text Intact

Let’s say you typed the following text in Microsoft Word (or directly in your HTML editor), and now you decide you want to place it in a Web page with spacing and line breaks intact:

This is some tabbed text.

This text has five spaces preceding it.

This text has no spaces preceding it.

This line of text has a blank line above it.

All the lines above, as well as this one, have line breaks

created by pressing the ENTER key.

Copy and paste the text into your HTML editor and then place the <PRE> and </PRE> tags. Without the <PRE> tags, the text would all run together as one line without the spaces or line breaks that were created in Word.

Most text treatments, except for Bold and Italic, will not be preserved. Some treatments, such as bulleted or numbered lists, will appear with some, but not all, formatting intact. More advanced treatments, such as typefaces, will not be preserved.

You can create links using text within a <PRE> element in the same way as with any other text. In fact, you can insert any HTML element within the <PRE> tags, and it will probably work. If “probably” isn’t good enough, consult the <PRE> tags content model at the World Wide Web Consortium Web at www.w3.org/TR/html4/struct/text.html#h-9.3.4. It will give you the official scoop.

Not A Pretty Sight

There are a few drawbacks to using the <PRE> tag. Viewers of the page may have to scroll horizontally if their monitor or screen resolution can’t accommodate the length of a text line. Lines of text will not reflow if the browser is resized.

Preformatted text will be presented in a font such as Courier- in other words, similar to what you would get from an old typewriter. (Remember those?) You can make the text more attractive by using a style, but the usefulness of this depends on what kind of text you are presenting.

You may want poetry, literature, or formal speeches presented in something other than Courier. You can use styles to achieve different presentations in the same way as with other elements. So if we want to place a poem on a page, we could set a style like this:

<PRE STYLE=”font-family: Georgia; font-size: 12pt; color: #000099;”>

This defeats the purpose of the <PRE> tag in other instances, however. “The Gettysburg Address,” for example, may be worth treating specially with styles to change font, font size, and color. But text such as that in scientific formulas and computer code actually is better off without special treatment.

The following formulas for finding the area of two shapes benefits from the basic, Courier approach. Symbols, numbers, and letters are easier to read because they line up in columns.

Triangle:

A = (ab)/2, in which a is the base and b the height.

Square:

A = a², in which a is one of the sides.

Using <PRE> to preserve white space, tabs, and line breaks can come in very useful with certain types of content. You will probably run across a case sooner rather than later where you can put it to use.