pre element

Description

The pre element represents a block of preformatted text where, in contrast with other elements, continuos spaces and line breaks are respected. Also, browsers use fixed-pitch fonts to represent the text in this element, which means that all characters will have the same width.

Take note that browsers won't apply automatic word-wrap to blocks of text inside a pre element. This means that text lines won't be splitted unless a line break is found.

The pre element is commonly used to display computer code, plain text or ascii art. In some cases, it's accompanied by other elements like code, samp or kbd.

Examples

In the following example there's a paragraph followed by a pre block, both intentionally with the same content, so you can see the difference between them and what's particular about the pre block.

<p>The things you'll need are listed here:
  - A lantern.
  - A matches box.
  - A sharp knife.
</p>
<pre>The things you'll need are listed here:
  - A lantern.
  - A matches box.
  - A sharp knife.
</pre>

The things you'll need are listed here:
  - A lantern.
  - A matches box.
  - A sharp knife.

An important thing to note here is that the browser strips all repeated whitespace and linebreaks for the p element (and all other elements except pre).

Now, in the second example, we'll see how the pre element is combined with code to display a piece of computer program.

<p>The function goes as follows:</p>
<pre><code>function sayHello() {
  console.log('Hello!');
  alert('Hello!');
}</code></pre>

function sayHello() {
  console.log('Hello!');
  alert('Hello!');
}

Note how in this example, pre is containing code and not the other way around. This is because code is unable to contain flow elements like pre. The same reasoning applies to other elements like samp or kbd.

Attributes

<pre width="10">bool sayHello(int times);</pre>

Events