Using Preformatted Text

Usually, browsers collapse all extra returns and spaces and automatically break lines 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 computer code examples.

Tips

Preformatted text is generally displayed with a monospaced font like Courier. You can use styles to change the font, if you like (see page 152).
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 > and <, 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 336.
You can also use styles to maintain line breaks and spaces (see page 164).
Note that pre is block-level while the tags on page 72 are all inline.

Using Preformatted Text

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

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

Using Preformatted Text

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

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

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