<pre>

<pre> represents preformatted text. Browser defaults preserve spaces and line breaks and usually use a monospace font. It is still parsed as HTML: special characters must be escaped when you want to display markup literally.

A formatted code block

<code> identifies the content as code; pre preserves its indentation. The horizontal scroll stays inside the block when a line is too wide.

<pre><code>&lt;section&gt;
  &lt;h2&gt;Practice&lt;/h2&gt;
  &lt;p&gt;Change one value.&lt;/p&gt;
&lt;/section&gt;</code></pre>

pre {
  overflow: auto;
  max-width: 100%;
  padding: 1rem;
  background: #eff6ff;
}

Whitespace details

The HTML parser removes the first newline immediately after the opening pre tag. Other whitespace is normally preserved. CSS white-space can change this behavior; pre-wrap preserves whitespace while allowing wrapping.

Pre accepts phrasing content, not arbitrary structural elements. Without escaping, an actual <button> inside pre is a button, not displayed source code. Escape & as & and < as < when writing literal code.

Accessibility and alternatives

ASCII diagrams may be meaningless when read character by character. Supply a text description, or expose the artwork as a named image and provide a visible caption. Do not use pre merely to space columns of unrelated content; use proper tables or CSS layout.

Use samp for program output or kbd for input inside a preformatted block. Try white-space: pre-wrap and compare how long lines behave.

Sources and browser support

MDN: pre describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.