Preserving Formatting—The Element - HTML
Interview Questions
Practice Test
Pragnyameter Exam
All Tutorials
Job SearchSometimes you will want the client browser to interpret your text literally, including the white space and forced formatting (line breaks, and so on). In those cases, you can use the preformatted tag (<pre>). The preformatted tag tells the client browser that the text within the tag has been preformatted and should appear exactly as it appears in the code. The tag also causes all text within to be rendered in a monospace font.
For example, consider the following output from a MySQL database:
mysql> select * from settings;+---------------+-------------------+
| name | value |
+---------------+-------------------+
| newsupdate | 1069455632 |
| releaseupdate | Tue, 1/28, 8:18pm |
| status | 0 |
| feedupdate | 1069456261 |
+---------------+-------------------+
4 rows in set (0.00 sec)
If you wanted this to appear in a browser as-is, you would have to use liberal nonbreaking spaces and line breaks, as well as specify a monospaced font, as shown in the following code:
<p style=“font-family: courier;”>mysql> select * from settings;
+---------------+-------------------+
| name
| value
|
+---------------+-------------------+
| newsupdate | 1069455632
|
| releaseupdate | Tue, 1/28, 8:18pm |
| status
| 0
|
| feedupdate | 1069456261
|
+---------------+-------------------+
4 rows in set (0.00 sec)</p><pre>
mysql> select * from settings;
+---------------+-------------------+
| name | value |
+---------------+-------------------+
| newsupdate | 1069455632 |
| releaseupdate | Tues, 1/28, 8:18pm|
| rolfstatus | 0 |
| feedupdate | 1069456261 |
+---------------+-------------------+
4 rows in set (0.00 sec)
</pre>
The <pre> tag tells the browser that the text has been preformatted and that it should be rendered verbatim.
Preformatted text is best for textual tables, or to set certain element (such as lines of code) apart from the main body of a document.
