<pre>
The <pre> element preserves whitespace and line breaks exactly as written. It is often used for code, logs, generated output, and text where formatting is meaningful.
Overview
The <pre> element preserves whitespace and line breaks exactly as written. It is often used for code, logs, generated output, and text where formatting is meaningful.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | ≤4 | 18 | ≤3.2 | |
| DOM API | ||||||
| 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 |
Syntax
<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.
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
Powered by web-features