Join Webmonkey, it's free. Members log in.


[Learn It][Teaching Tool]

Preformatted Text
[Imagemap]
<pre>  turns on preformatted text
</pre> turns off preformatted text

Yes, <pre> stands for "preformatted" (not "pretentious," though that was a good guess). Preformatted text differs from regular text in two important ways: (1) It will appear in a monospaced, or fixed-width font (making it look typewritten), and (2) it will appear in the browser window exactly as you typed it, including carriage returns and spaces.

Preformatted text is best used when displaying code, ASCII art, ee cummings poetry, or anything else in which line returns and spaces are intentional and essential. But beware the perils of preformatting: You must hit return on each line, or the text w ill trail off the browser window.

The HTML for preformatted text will look something like this:

<pre>Dear Auntie Monkey,
I'd gladly borrow some carriage
returns
and s p a c e s today
         if 
you let me repay you ... tomorrow.</pre>

And the display will look strikingly similar:

Dear Auntie Monkey,
I'd gladly borrow some carriage
returns
and s p a c e s today
         if 
you let me repay you ... tomorrow.

Now, let's take the exact HTML from our example, but take it out of <pre>:

<p>Dear Auntie Monkey,
I'd gladly borrow some carriage
returns
and s p a c e s today
         if 
you let me repay you ... tomorrow.

And see how it displays:

Dear Auntie Monkey, I'd gladly borrow some carriage returns and s p a c e s today if you let me repay you ... tomorrow.

See? The line returns and spaces - so crucial to our little letter - are ignored or downplayed in regular HTML.

Preformatted text can be finicky (in some browsers, it "undoes" lists and headlines), but it can be succesfully combined with other tags. You can make it bold or italic, for instance, and you can also build links into it, as shown below:

If your HTML doc reads like this:

<pre>My stomach
       ached
          with                     laughter.
               s u p p r e s s e d 

Anyone could have <b>thought</b>
     to kick the cameraman.

       But only <a href="mailto:klug@hotwired.com">Eric</a>
            would actually <i>do</i> it.</pre>

It will display like this:

My stomach
       ached
          with                     laughter.
               s u p p r e s s e d 

Anyone could have thought
     to kick the cameraman.

       But only Eric
            would actually do it.

Got a handle on it? Do it.



Previously in HTML ...

HOMESEARCH
HELP

Copyright © 1996 HotWired, Inc. All rights reserved.