Widely available Use it when the text layout itself carries meaning and must not collapse into normal paragraph spacing.

<pre>

The <pre> HTML element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced font.

Whitespace inside this element is displayed as written, with one exception. If one or more leading newline characters are included immediately following the opening <pre> tag, the first newline character is stripped. This transformation is done by the HTML parser and does not apply when using XHTML.

<pre> elements' text content is parsed as HTML, so if you want to ensure that your text content stays as plain text, some syntax characters, such as <, may need to be escaped using their respective character references. See escaping ambiguous characters for more information.

<pre> elements commonly contain <code>, <samp>, and <kbd> elements, to represent computer code, computer output, and user input, respectively.

By default, <pre> is a block-level element, i.e., its default display value is block.

TextCodeWhitespace

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<pre>
1
12
1
≤4
18
≤3.2
DOM API
HTMLPreElement

The HTMLPreElement interface exposes specific properties and methods (beyond those of the HTMLElement interface it also has available to it by inheritance) for manipulating a block of preformatted text (pre).
1
12
1
3
18
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<pre><code>function hello() {
  console.log("Hello, World!");
}
hello();</code></pre>

Live demo

Format onlytext

Pre element in emptywhite or change row. display.co-dblock to usage.

PreviewFullscreen

rownumber withco-d

CSS counter- in rownumber displaypattern.

PreviewFullscreen

aski-a-t

emptywhite retainaski-a-t display. with pre

PreviewFullscreen

Use cases

  • Code blocks

    Preserve indentation and line breaks for examples, snippets, and terminal-style output.

  • Formatted text output

    Display logs, ASCII layouts, or machine-generated text where spacing must stay intact.

Cautions

  • Long lines can overflow narrow screens, so provide wrapping or horizontal scrolling intentionally.
  • pre preserves all whitespace, which can accidentally include unwanted indentation from source formatting.

Accessibility

  • If code or output is important, pair pre with a descriptive label or heading so users know what the block contains before entering it.

Related links