<pre> - Preformatted Text

The `<pre>` Element

Block-level HTML 2.0

The <pre> element represents preformatted text where whitespace, line breaks, and formatting are preserved exactly as written in the HTML. It’s commonly used for code blocks, ASCII art, and text that requires specific formatting.

Quick Example

<pre>
function greet(name) {
console.log("Hello, " + name);
}
</pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<pre>
function greet(name) {
console.log("Hello, " + name);
}
</pre>

Syntax

<pre>
  Text with    preserved    spacing
  and line breaks
</pre>

All whitespace inside <pre> is preserved, including spaces, tabs, and newlines.

Attributes

The <pre> element supports all global attributes like id, class, style, and lang.

<pre id="code-sample" class="language-javascript">
  // Code here
</pre>

Common Use Cases

Code Blocks

<pre>
function calculateTotal(price, quantity) {
const subtotal = price * quantity;
const tax = subtotal * 0.08;
return subtotal + tax;
}
</pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<pre>
function calculateTotal(price, quantity) {
const subtotal = price * quantity;
const tax = subtotal * 0.08;
return subtotal + tax;
}
</pre>

With code Element

Combine <pre> with <code> for semantic code blocks:

<pre><code>const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]</code></pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<pre><code>const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]</code></pre>

Multiple Languages

<h3>HTML</h3>
<pre><code>&lt;div class="container"&gt;
&lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/div&gt;</code></pre>

<h3>CSS</h3>
<pre><code>.container {
max-width: 1200px;
margin: 0 auto;
}</code></pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>HTML</h3>
<pre><code>&lt;div class="container"&gt;
&lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/div&gt;</code></pre>

<h3>CSS</h3>
<pre><code>.container {
max-width: 1200px;
margin: 0 auto;
}</code></pre>

ASCII Art

<pre>
  /\_/\
 ( o.o )
  > ^ <
/|     |\
(_|     |_)
</pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<pre>
  /\_/\
 ( o.o )
  > ^ <
/|     |\
(_|     |_)
</pre>

Formatted Text

<pre>
Invoice #12345
--------------
Item        Qty    Price
Widget A      5   $10.00
Widget B      3   $15.00
--------------
Total            $95.00
</pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<pre>
Invoice #12345
--------------
Item        Qty    Price
Widget A      5   $10.00
Widget B      3   $15.00
--------------
Total            $95.00
</pre>

Command Line Output

<pre>
$ npm install react
+ react@18.2.0
+ react-dom@18.2.0
added 4 packages in 2.156s
</pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<pre>
$ npm install react
+ react@18.2.0
+ react-dom@18.2.0
added 4 packages in 2.156s
</pre>

Styling Preformatted Text

Basic Code Styling

<style>
pre {
  background-color: #1e293b;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}
</style>

<pre>function hello() {
return "Hello, World!";
}</pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
pre {
  background-color: #1e293b;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}
</style>

<pre>function hello() {
return "Hello, World!";
}</pre>

Line Numbers

<style>
.line-numbers {
  background: #f8f9fa;
  border-left: 3px solid #3b82f6;
  padding: 1rem;
  counter-reset: line;
}
.line-numbers code {
  counter-increment: line;
}
.line-numbers code::before {
  content: counter(line);
  display: inline-block;
  width: 2em;
  margin-right: 1em;
  color: #9ca3af;
  text-align: right;
}
</style>

<pre class="line-numbers"><code>function add(a, b) {
return a + b;
}
console.log(add(2, 3));</code></pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.line-numbers {
  background: #f8f9fa;
  border-left: 3px solid #3b82f6;
  padding: 1rem;
  counter-reset: line;
}
.line-numbers code {
  counter-increment: line;
}
.line-numbers code::before {
  content: counter(line);
  display: inline-block;
  width: 2em;
  margin-right: 1em;
  color: #9ca3af;
  text-align: right;
}
</style>

<pre class="line-numbers"><code>function add(a, b) {
return a + b;
}
console.log(add(2, 3));</code></pre>

Scrollable Code

<style>
.scrollable-code {
  max-height: 150px;
  overflow-y: auto;
  background: #f3f4f6;
  padding: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}
</style>

<pre class="scrollable-code"><code>// This is a long code block
function processData(data) {
const cleaned = data.filter(item => item.valid);
const transformed = cleaned.map(item => ({
  ...item,
  processed: true
}));
return transformed.sort((a, b) => a.id - b.id);
}

// More code...
const result = processData(rawData);
console.log(result);</code></pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.scrollable-code {
  max-height: 150px;
  overflow-y: auto;
  background: #f3f4f6;
  padding: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}
</style>

<pre class="scrollable-code"><code>// This is a long code block
function processData(data) {
const cleaned = data.filter(item => item.valid);
const transformed = cleaned.map(item => ({
  ...item,
  processed: true
}));
return transformed.sort((a, b) => a.id - b.id);
}

// More code...
const result = processData(rawData);
console.log(result);</code></pre>

Syntax Highlighting

<style>
.highlight .keyword { color: #d73a49; font-weight: bold; }
.highlight .string { color: #032f62; }
.highlight .function { color: #6f42c1; }
.highlight .comment { color: #6a737d; font-style: italic; }
</style>

<pre class="highlight"><code><span class="keyword">function</span> <span class="function">greet</span>(name) {
<span class="comment">// Display greeting</span>
<span class="keyword">return</span> <span class="string">"Hello, "</span> + name;
}</code></pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.highlight .keyword { color: #d73a49; font-weight: bold; }
.highlight .string { color: #032f62; }
.highlight .function { color: #6f42c1; }
.highlight .comment { color: #6a737d; font-style: italic; }
</style>

<pre class="highlight"><code><span class="keyword">function</span> <span class="function">greet</span>(name) {
<span class="comment">// Display greeting</span>
<span class="keyword">return</span> <span class="string">"Hello, "</span> + name;
}</code></pre>

Escaping HTML

When displaying HTML code, escape special characters:

<pre><code>&lt;div class="example"&gt;
&lt;p&gt;This is HTML code&lt;/p&gt;
&lt;/div&gt;</code></pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<pre><code>&lt;div class="example"&gt;
&lt;p&gt;This is HTML code&lt;/p&gt;
&lt;/div&gt;</code></pre>

Common Patterns

Code with Title

<figure>
<figcaption>example.js</figcaption>
<pre><code>const greeting = "Hello, World!";
console.log(greeting);</code></pre>
</figure>

Result

Interactive code playground requires JavaScript. Here's the code:

<figure>
<figcaption>example.js</figcaption>
<pre><code>const greeting = "Hello, World!";
console.log(greeting);</code></pre>
</figure>

Multiple Code Blocks

<h3>Before</h3>
<pre><code>var x = 10;
var y = 20;</code></pre>

<h3>After</h3>
<pre><code>const x = 10;
const y = 20;</code></pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Before</h3>
<pre><code>var x = 10;
var y = 20;</code></pre>

<h3>After</h3>
<pre><code>const x = 10;
const y = 20;</code></pre>

Terminal Style

<style>
.terminal {
  background: #1a1a1a;
  color: #00ff00;
  padding: 1rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}
.terminal::before {
  content: '$ ';
  color: #fff;
}
</style>

<pre class="terminal">npm run build

Building for production...
✓ Build complete in 3.2s</pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.terminal {
  background: #1a1a1a;
  color: #00ff00;
  padding: 1rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}
.terminal::before {
  content: '$ ';
  color: #fff;
}
</style>

<pre class="terminal">npm run build

Building for production...
✓ Build complete in 3.2s</pre>

Accessibility

Use with Code Element

Combining <pre> and <code> provides better semantic meaning:

Good
Less Semantic

<pre><code>
function example() {
  return true;
}
</code></pre>

<pre>
function example() {
  return true;
}
</pre>

Specify Language

Help assistive technology by specifying the programming language:

<pre><code class="language-javascript">
const message = "Hello";
</code></pre>

<pre><code class="language-python">
message = "Hello"
print(message)
</code></pre>

Horizontal Scrolling

Ensure code blocks can scroll horizontally:

<style>
pre {
  overflow-x: auto;
  max-width: 100%;
}
</style>

<pre><code>const veryLongVariableName = "This is a very long line of code that will need horizontal scrolling on narrow screens";</code></pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
pre {
  overflow-x: auto;
  max-width: 100%;
}
</style>

<pre><code>const veryLongVariableName = "This is a very long line of code that will need horizontal scrolling on narrow screens";</code></pre>

Avoid Tiny Font Sizes

Keep code readable:

Good
Avoid

<pre style="font-size: 0.9rem;">
  Code at readable size
</pre>

<pre style="font-size: 0.5rem;">
  Code that's too small
</pre>

Common Mistakes

<p>This is regular text that wraps normally.</p>

<pre>This is regular text that should wrap.</pre>

Indentation Matters

Indentation in HTML source affects display:

Will Display Indented
No Extra Indentation

<pre>
  This text is indented
  in the source code
</pre>

<pre>
This text is not indented
in the source code
</pre>

Watch for Trailing Whitespace

<!-- Each line has different spacing -->
<pre>No spaces
Two spaces
  Four spaces
    Six spaces</pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Each line has different spacing -->
<pre>No spaces
Two spaces
  Four spaces
    Six spaces</pre>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The <pre> element has been supported since early HTML versions. Modern browsers support overflow-x: auto for horizontal scrolling.

 Inline or block code snippets.
Learn more →

     
 Sample output from a computer program.
Learn more →
 
     
 Keyboard input representation.
Learn more →
 
     
 Variables in mathematical expressions or code.
Learn more →

 
Specifications
Section titled “Specifications”

WHATWG HTML Living Standard
MDN Web Docs
W3C HTML 5.3

     
     Previous 
 <blockquote> - Block Quotation      Next 
 <div> - Content Division

<pre> - Preformatted Text

The <pre> Element

Quick Example

Syntax

Attributes

Common Use Cases

Code Blocks

With code Element

Multiple Languages

ASCII Art

Formatted Text

Command Line Output

Styling Preformatted Text

Basic Code Styling

Line Numbers

Scrollable Code

Syntax Highlighting

Escaping HTML

Common Patterns

Code with Title

Multiple Code Blocks

Terminal Style

Accessibility

Use with Code Element

Specify Language

Horizontal Scrolling

Avoid Tiny Font Sizes

Common Mistakes

Don’t Use for Regular Text

Indentation Matters

Watch for Trailing Whitespace

Browser Support

Related Elements

Specifications

The `<pre>` Element