Preformatted Text

Most of the time, text in an HTML file is formatted based on the HTML tags used to mark up that text. As I mentioned in Lesson 3, "Introducing HTML and XHTML," any extra white space (spaces, tabs, returns) that you put in your text is stripped out by the browser.

The one exception to this rule is the preformatted text tag <pre>. Any white space that you put into text surrounded by the <pre> and </pre> tags is retained in the final output. With these tags, the spacing in the text in the HTML source is preserved when it's displayed on the page.

The catch is that preformatted text usually is displayed (in graphical displays, at least) in a monospaced font such as Courier. Preformatted text is excellent for displaying code examples in which you want the text formatted with exactly the indentation the author used. Because you can use the <pre> tag to align text by padding it with spaces, you can use it for simple tables. However, the fact that the tables are presented in a monospaced font might make them less than ideal. (You'll learn how to create real tables in Lesson 8, "Building Tables.") The following is an example of a table created with <pre>:

Input

<pre>        Diameter  Distance   Time to    Time to        (miles)   from Sun   Orbit     Rotate              (millions              of miles) ------------------------------------------------------------------------ Mercury    3100     36    88 days    59 days Venus     7700     67    225 days    244 days Earth     7920     93    365 days    24 hrs Mars      4200     141    687 days    24 hrs 24 mins Jupiter    88640     483    11.9 years   9 hrs 50 mins Saturn    74500     886    29.5 years   10 hrs 39 mins Uranus    32000    1782    84 years    23 hrs Neptune    31000    2793    165 days    15 hrs 48 mins Pluto     1500    3670    248 years   6 days 7 hrs </pre>

Figure 6.4 shows how it looks in a browser.

Output

Figure 6.4. A table created using <pre>, shown in a browser.

When you're creating text for the <pre> tag, you can use link tags and character styles, but not element tags such as headings or paragraphs. You should break your lines with hard returns and try to keep your lines to 60 characters or fewer. Some browsers might have limited horizontal space in which to display text. Because browsers usually won't reformat preformatted text to fit that space, you should make sure that you keep your text within the boundaries to prevent your readers from having to scroll from side to side.

Be careful with tabs in preformatted text. The actual number of characters for each tab stop varies from browser to browser. One browser might have tab stops at every fourth character, whereas another may have them at every eighth character. You should convert any tabs in your preformatted text to spaces so that your formatting isn't messed up if it's viewed with different tab settings than in the program you used to enter the text.

The <pre> tag is also excellent for converting files that were originally in some sort of text-only form, such as mail messages or Usenet news postings, into HTML quickly and easily. Just surround the entire content of the article within <pre> tags and you have instant HTML, as in the following example:

<pre> To: [e-mail] From: [e-mail] Subject: Tales of the Move From Hell, pt. 1 I spent the day on the phone today with the entire household services division of northern California, turning off services, turning on services, transferring services and other such fun things you have to do when you move. It used to be you just called these people and got put on hold for and interminable amount of time, maybe with some nice music, and then you got a customer representative who was surly and hard of hearing, but with some work you could actually get your phone turned off. </pre>

One creative use of the <pre> tag is to create ASCII art for your web pages. The following HTML input and output example shows a simple ASCII-art cow:

Input

 <pre>    ( ) Moo (oo)    \/------\     ||    | \     ||---W|| *     ||    || </pre>

The result is displayed in Figure 6.5.

Output

Figure 6.5. A bit of ASCII art that illustrates how preformatted text works.