The <pre> element displays preformatted text exactly as written in the source — preserving whitespace, line breaks, and indentation — in a monospace font.

Syntax

<pre>
  function greet() {
    return "hi";
  }
</pre>

Deep Dive Course

Normally, browsers collapse multiple spaces and ignore line breaks in HTML source. **`<pre>`** turns that off: whatever whitespace, indentation, and line breaks you write inside it are rendered exactly as-is, in a monospace font by default. This makes it ideal for displaying code blocks, ASCII art, or any content where the exact layout matters. It's very commonly paired with `<code>` (`<pre><code>...</code></pre>`) to represent a formatted, multi-line code snippet.

1Understanding <pre>

Normally, browsers collapse multiple spaces and ignore line breaks in HTML source. `<pre>` turns that off: whatever whitespace, indentation, and line breaks you write inside it are rendered exactly as-is, in a monospace font by default. This makes it ideal for displaying code blocks, ASCII art, or any content where the exact layout matters. It's very commonly paired with <code> (<pre><code>...</code></pre>) to represent a formatted, multi-line code snippet.

💡

Remember that special characters like < and & still need to be escaped (<, &) inside <pre>, exactly as anywhere else in HTML — 'preformatted' only means whitespace is preserved, not that HTML parsing is disabled.

editor.html

<pre><code>function add(a, b) {
  return a + b;
}</code></pre>

localhost:3000

2Practical Example

Here is a real-world application of <pre> showing how it is used in production HTML.

editor.html

<!-- Preserving ASCII art / exact spacing -->
<pre>
  /\_/\
 ( o.o )
  > ^ <
</pre>

localhost:3000

3Best Practices

Follow these guidelines when working with <pre>:

1. Use <pre><code>...</code></pre> together for multi-line code blocks

2. Escape <, >, and & characters inside <pre>, since it's still parsed as HTML

3. Don't rely on <pre> for layout spacing outside of genuinely preformatted content

⚠️

Tip: Remember that special characters like < and & still need to be escaped (<, &) inside <pre>, exactly as anywhere else in HTML — 'preformatted' only means whitespace is preserved, not that HTML parsing is disabled.

editor.html

<pre><code>function add(a, b) {
  return a + b;
}</code></pre>

localhost:3000

Examples

Example 01Basic Usage

<pre><code>function add(a, b) {
  return a + b;
}</code></pre>

Example 02Advanced Example

<!-- Preserving ASCII art / exact spacing -->
<pre>
  /\_/\
 ( o.o )
  > ^ <
</pre>

Best Practices

Use
```
...
```
together for multi-line code blocks
Escape <, >, and & characters inside
```
, since it's still parsed as HTML
```

Don't rely on

 for layout spacing outside of genuinely preformatted content

Interview Question

Why is <pre> often paired with <code>, and would using just one of them be enough?▼

Hint: Think about what each element is individually responsible for.

<pre> handles the whitespace/line-break PRESERVATION and monospace styling; <code> handles the SEMANTIC meaning that the content is source code, which assistive technology and tools can key off. Using only <code> would collapse whitespace and line breaks (since <code> alone doesn't preserve them), breaking multi-line code formatting. Using only <pre> would preserve formatting but wouldn't semantically flag the content as code. Combined, <pre><code> gives you both correct visual formatting and correct meaning.

Exercises

EasyPractice using <pre> in a real scenario.

View Solution

<pre><code>function add(a, b) {
  return a + b;
}</code></pre>

Frequently Asked Questions

Why is <pre> often paired with <code>, and would using just one of them be enough?▼

 handles the whitespace/line-break PRESERVATION and monospace styling;  handles the SEMANTIC meaning that the content is source code, which assistive technology and tools can key off. Using only  would collapse whitespace and line breaks (since  alone doesn't preserve them), breaking multi-line code formatting. Using only  would preserve formatting but wouldn't semantically flag the content as code. Combined,  gives you both correct visual formatting and correct meaning.

`Related Functions`

code-tagsamp-tag