Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

3.5. Preformatted Text

Occasionally you will need to present content that has already been formatted—tabbed or spaced data, for example—that you do not want the user agent to reformat. For example, suppose you had the following output from a SQL query:

+---------------+-------------------+
| name          | value             |
+---------------+-------------------+
| newsupdate    | 1069455632        |
| releaseupdate | Tue, 1/28, 8:18pm |
| status        | 0                 |
| feedupdate    | 1069456261        |
+---------------+-------------------+

If you allow a user agent to reformat this text, it will end up looking something like what is shown in Figure 3-6, which is nothing like what was intended.

Figure 3-6. Figure 3-6

Keep in mind that all white space (spaces, line breaks, and so on) will usually be condensed by the user agent into one single space. Use the <pre> tag as required to have the user agent interpret and render white space verbatim.

In such cases, use the preformatted text tag (<pre>). This tag tells the user agent not to reformat the text within the <pre> block but to render it verbatim as it appears in the document.

If you use a <pre> block with the example text (as shown in the following code), the user agent will render it correctly, as shown in Figure 3-7.

<pre> +---------------+-------------------+ | name | value | +---------------+-------------------+ | newsupdate | 1069455632 | | releaseupdate | Tue, 1/28, 8:18pm ...