pre (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 2 |
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
Example
A snippet of HTML on a reference web site, in this case using thepre and
code elements to markup some code:<pre><code>//Do a bit of code debugging ||-- Check Array vals
document.write ("<ul>");
for (i=1;i<array.length;i++)
{
str += "<li>Value of array " + i + " is: " +array[i] + "</li>";
}
document.write(str);
document.write ("</ul>");
</code></pre>
- Type
- block-level element
- Contains
- inline elements only
- Contained by
- block-level elements
Description
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
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.
pre
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 <ul> …
</ul>, and
<li> … </li>
respectively, so that the browser displays them on screen rather than
attempting to interpret them and create new list items.
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.
Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | 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.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
