• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Basic (X)HTML Formatting > Using Preformatted Text

Using Preformatted Text

Usually, browsers eliminate all extra returns and spaces and automatically create line breaks according to the size of the window. Preformatted text lets you maintain the original line breaks and spacing that you’ve inserted in the text. It is ideal for code, poetry, homemade tables, and ASCII art.

To use preformatted text

Type <pre>.

Type or copy the text that you wish to display as is, with all the necessary spaces, returns, and line breaks.

Type </pre>.

Figure 4.10. The pre element is ideal for text that contains important spaces and line breaks, like the chunk of Perl CGI code shown above.


<p>Here's the first part of the Cat and Otter Bistro
script (see the WAP/WML chapter), where the
variables are declared, and the $number variable is
screened to make sure it's actually a number:

<pre>my $number = param('number');

my $smoke = param('smoke');

my $dinner_index = param('dinner_index');

$number =~ /([0-9]*)/ ;

$number = $1;


Figure 4.11. Notice how the line breaks, including the extra return between the third and fourth lines of code, are maintained.


  • Preformatted text is generally displayed with a monospaced font like Courier. You can use styles to change the font, if you like (see page 158).

  • You can insert additional formatting within preformatted text. However, you should do it after you set up your preformatted text, since the tags take up space in the (X)HTML document, but not in the page.

  • If what you want to display contains (X)HTML elements, you’ll have to substitute the appropriate character entities for the greater than and less than signs (namely &gt; and &lt;, respectively). Otherwise the browser will try to display those elements; the pre tag works no magic on them. For more information, consult Adding Characters from Outside the Encoding on page 340.

  • You can also use styles to maintain line breaks and spaces (see page 170).

  • Note that pre is block-level while the tags on page 76 are all inline.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint