0%

<pre> Preformatted text

Shows text exactly as typed, spaces and line breaks included.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<pre> displays text exactly as you typed it. Spaces, tabs and line breaks all survive, usually in a monospace font. Code blocks, ASCII art and poems with odd spacing are the classic uses.

For code, put a <code> element inside. Tags are still parsed inside pre, so a literal less-than sign has to be written &lt;. Long lines do not wrap by default, and on a phone that means horizontal scrolling.

The pre element in the HTML Living Standard (opens in a new tab) also explains why a newline right after the start tag is ignored. For code samples, pair it with the code element.

Syntax

<pre><code>line 1
  indented line 2</code></pre>

When to use it

Pre is for text where spacing and line breaks carry meaning: code samples, command-line output, configuration files, plain-text tables copied from a terminal, ASCII diagrams, poems whose indentation is part of the form. Pair it with <code> for source code, <samp> for program output and <kbd> for what the user types.

A short inline snippet, such as one tag named in a sentence, needs only <code>. A poem with ordinary lines often reads better as paragraphs with <br>, which wrap on small screens. Real tabular data belongs in a table, which is far more accessible than columns lined up with spaces.

Tab characters inside pre display eight spaces wide by default, so code indented with tabs can look much wider than it did in your editor. Set tab-size:2 in CSS or indent with spaces. Readers who copy from a pre also get the exact whitespace, trailing spaces you never meant to publish included.

Live example

Edit the code and watch the preview.

<pre><code>&lt;ul&gt;
  &lt;li&gt;Milk&lt;/li&gt;
  &lt;li&gt;Eggs&lt;/li&gt;
&lt;/ul&gt;</code></pre>

More examples

Terminal session with kbd and samp

A terminal transcript mixes what the user types with what the computer prints. Inside pre, <kbd> marks the typed command and <samp> the output. CSS white-space:pre-wrap lets long lines wrap on narrow screens instead of scrolling.

<style>
pre{background:#222;color:#eee;padding:10px;white-space:pre-wrap}
kbd{color:#9f9}
</style>
<pre>$ <kbd>ls images</kbd>
<samp>cat.svg  dog.svg  logo.svg</samp>
$ <kbd>echo "done"</kbd>
<samp>done</samp></pre>

ASCII diagram with a text alternative

Screen readers would read an ASCII diagram character by character. Giving the pre role="img" and an aria-label replaces that with one clear sentence, while the figure caption explains the diagram to everyone.

<figure>
  <pre role="img" aria-label="Diagram: the browser sends a request to the server, and the server sends back a page.">
+---------+   request    +--------+
| Browser | -----------&gt; | Server |
|         | &lt;----------- |        |
+---------+     page     +--------+
  </pre>
  <figcaption>How a web page is loaded.</figcaption>
</figure>

Tip: Code blocks go in <pre><code>...</code></pre>, with < escaped as &lt;.

Browser support

Pre has worked in every browser since the early days of HTML. Skip its obsolete width attribute, and the old listing and xmp elements it replaced. Widths and wrapping are a job for CSS properties such as white-space and overflow-x.

Accessibility

Screen readers read ASCII art and diagrams in pre character by character. Wrap them in a figure with role="img" plus an aria-label or a figcaption. Text alternatives for ASCII art are covered in the W3C note Understanding Non-text Content (opens in a new tab).

Common mistakes

Wrong

<pre><p>Hello</p></pre>

Right

<pre><code>&lt;p&gt;Hello&lt;/p&gt;</code></pre>

The browser still parses markup inside pre. Escape < and & to show code as text.

Frequently asked questions

How do I show a block of code in HTML?

Wrap it in <pre><code>...</code></pre>. The <pre> keeps whitespace and line breaks, and <code> marks the content as computer code. Escape special characters too: &lt; for a less-than sign and &amp; for an ampersand. Skip that and the browser tries to parse your HTML example as real tags. If the indentation is a mess, run the markup through Pretty HTML, an HTML formatter (opens in a new tab) before pasting it into pre.

How do I stop pre text from overflowing on mobile?

<pre> never wraps lines by default, so long ones run off the screen. You have two fixes. Add overflow-x:auto and the block scrolls sideways, or use white-space:pre-wrap to keep the spacing and allow wrapping. For code, scrolling usually wins, since wrapped code is harder to read.

Practise it

Related text elements

<p>One paragraph of text.<br>Breaks the line inside text, as in a postal address or a poem.<hr>A change of topic between paragraphs, drawn as a horizontal line.<blockquote>A longer quotation from another source, set apart as its own block.<div>A generic block box with no meaning, for grouping and styling.<span>A generic inline wrapper with no meaning, for styling part of a line of text.<strong>Text that is important, serious or urgent. Shown in bold by default.<em>Stress emphasis that changes what a sentence means. Italic by default.<b>Makes text stand out without adding importance, as with keywords. Bold by default.<i>Text in another voice: foreign words, terms, thoughts, ship names. Italic.<u>Text with an unspoken annotation, such as a flagged spelling error.<s>Content that is no longer accurate or relevant, drawn crossed out.<mark>Highlighted text, like a marker pen, showing relevance in the current context.<small>Side comments and fine print, like copyright lines or legal notes.<sub>Subscript text, set below the line, as in H2O.<sup>Superscript text, set above the line, as in exponents or 1st.<code>A fragment of computer code, set in a monospace font.<kbd>Keys or text the user should press or type.<samp>Sample output from a program or a computer system.<var>A variable in math or in code. Italic by default.<q>A short quotation inside a sentence. The browser adds the quote marks.<cite>The title of a creative work: a book, film, song, game or article.<abbr>An abbreviation or acronym, with an optional expansion in title.<dfn>Marks the term that the surrounding sentence or paragraph defines.<time>Marks a date, time or duration and gives it a machine-readable value.<data>Ties visible content to a machine-readable value.<del>Text that was removed from the document. Struck through by default.<ins>Text that was added to the document. Underlined by default.<wbr>A spot where the browser may break a long word if it has to.<bdi>Isolates text of unknown direction, such as user names.<bdo>Forces a text direction and overrides the normal bidi algorithm.<ruby>Small annotations above or beside text, mostly for East Asian pronunciation.<rt>The small reading or note in a ruby annotation.<rp>Fallback brackets around ruby text, shown only where ruby is unsupported.