You paste a poem into a page, or a short code snippet with its indentation, and what shows up looks nothing like what you wrote: repeated spaces collapse into one, line breaks vanish, everything ends up on a single endless line. HTML merges whitespace by default, in nearly every one of its elements.
<pre> is the exception that breaks this rule: the text inside it displays exactly as it was written in the source code, space for space, line for line.
Definition
<pre> stands for preformatted text. Unlike a paragraph or a heading, it faithfully keeps the repeated spaces, tabs and line breaks present in the source code, instead of merging or ignoring them. It is the only basic HTML tag that offers this behaviour by default.
Visually, a browser renders <pre> as a block, in a fixed-width font where every character takes up the same space, which makes it easier to line up columns or indentation. That font choice is an inherited styling convention rather than a requirement of the specification, and a site can freely override it with its own stylesheet.
A common trap: escaping angle brackets
The content of a <pre> is still ordinary HTML, parsed as such by the browser. Typing an opening angle bracket followed by a tag name inside it does not display it as-is, the browser tries to interpret it as a real tag, which breaks the layout or simply makes that piece of text vanish from what is shown.
To literally display angle brackets inside a <pre>, such as when a tutorial shows what a tag looks like, they need to be replaced with the < and > entities. Skip that step and the browser tries to run what you only meant to show, and the result on screen has nothing left in common with your source code.
<pre>
To show a real angle bracket: <div>
Not like this, which breaks everything: <div>
</pre>Always paired with <code> for a code snippet
For code, the convention is to nest a <code> element inside the <pre>, rather than using <pre> on its own. The <pre> handles the visual layout, the spacing and the lack of automatic wrapping, while <code> carries the meaning: this is a code snippet, not a poem or a table of numbers.
Syntax highlighters actually rely on that pairing to spot the blocks to process, typically through a class such as language-html or language-python placed on one of the two elements depending on the library.
Wrapping: the trade-off to manage
Because it preserves whitespace instead of merging it, <pre> never wraps automatically by default: a long line of code or an endless terminal command overflows its box rather than folding onto the next line. On a phone screen, that can create an awkward horizontal overflow across the whole page if the block is not properly contained.
Good practice is to place the block inside a container that allows horizontal scrolling, rather than forcing a wrap that would distort the code's indentation. It is still possible to opt into wrapping through CSS when the content allows for it, such as a poem whose lines never exceed the screen's width.
Best practices
Reserve <pre> for cases where the formatting of the source text carries real information: a poem, ASCII art, a terminal transcript, or a code snippet paired with <code>. Never use it purely to get a fixed-width font on an ordinary paragraph, that would twist its meaning for a visual effect a stylesheet can produce on its own, without preformatting anything.
Frequently asked questions
Why does my code snippet break the page instead of displaying as-is?
It is almost always the same slip: the angle brackets in the displayed code were not replaced with the matching entities, and the browser tried to interpret your example as a real HTML tag. Go back over the content and escape every angle bracket with the right entity.
Can <pre> be used alone, without <code>, for a code snippet?
Technically yes, the spacing would still be preserved the same way, but the semantic meaning would suffer: syntax highlighters and assistive technology would lose the explicit signal that this is code rather than plain formatted text. Nesting both tags together remains the recommended practice.
How do you stop a long code snippet from overflowing on mobile?
Place the <pre> inside a container with horizontal scrolling instead of forcing a wrap, which would distort the code's indentation. The user can then scroll the long line sideways without the rest of the page being affected by that overflow.