Français

<pre>

Preserving indentation and whitespace: code, poetry, ASCII art

— 1 min read

  • HTML
  • accessibility
  • semantics

<pre> — Preformatted text

The <pre> element displays text exactly as it is written in the source: spaces, tabs, and line breaks are preserved. Combine it with <code> for code blocks.

When to use it

You want to display a code block, a terminal excerpt, a poem, or any content where spatial formatting matters. Use <pre><code> for code, <pre><samp> for terminal output.

What you gain

Accessibility: unlike inline elements (<code>, <kbd>, <samp>), <pre> is announced by screen readers. NVDA says "preformatted text" when entering the block. Spatial structure (indentation, line breaks) is preserved.

Code example

<pre><code>const total = items
  .filter(item =&gt; item.active)
  .reduce((sum, item) =&gt; sum + item.price, 0);</code></pre>

Further reading