pre (HTML element)

Depr. Empty Version
No No HTML 2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full




The pre element is used to preserve important whitespace and carriage returns in source markup that HTML or XHTML would otherwise ignore. By default, only the first space is honored; subsequent spaces—unless specified using the &nbsp; entity—aren’t rendered by browsers. The pre element is most frequently used in conjunction with the code element to render code examples in which the presence of spaces and/or carriage returns may make a crucial difference as to whether the code will work or not when it is copied and pasted elsewhere.

The example presented above would appear on screen as shown in Figure 1. Note the spacing before the ||—Check Array vals section, as well as the fact that each line is output on a new line without the need for a br element.

Figure 1. Displaying some code using pre Example of pre element

In this example, JavaScript is being used to write out HTML, which is then rendered on screen. Thus, in the source code, the opening and closing ul and li tags are written as &lt;ul&gt;&lt;/ul&gt;, and &lt;li&gt;&lt;/li&gt; respectively, so that the browser displays them on screen rather than attempting to interpret them and create new list items.


A snippet of HTML on a reference web site, in this case using the pre and code elements to markup some code:
<pre><code>//Do a bit of code debugging     ||-- Check Array vals
document.write ("&lt;ul&gt;");
for (i=1;i&lt;array.length;i++)
 str += "&lt;li&gt;Value of array " + i + " is: " +array[i] + "&lt;/li&gt;";
document.write ("&lt;/ul&gt;");

Use This For …

Use pre for content whose whitespace has semantic meaning. If you want to retain whitespace for visual purposes, but those spaces don’t actually have any semantic meaning, use the "white-space" CSS property instead.


Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

The pre element enjoys good browser support, with all the major browsers rendering it in a fixed-width font—usually Courier.

User-contributed notes

There are no comments yet.

Related Products