pre (HTML element)

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.

Figure 1. Displaying some code using 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

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