The <pre> element
The <pre> tag displays preformatted text exactly as it is written in the HTML source — every space, tab and line break is kept, and the text renders in a monospace font by default. It is most often used for code samples, ASCII art and plain-text output where alignment matters.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, palpable content |
| Content model | Phrasing content (text and inline elements such as <code>, <span>, <a>) |
| Tag omission | Neither the start nor the end tag can be omitted |
| Permitted parents | Any element that accepts flow content |
| DOM interface | HTMLPreElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
How whitespace works in <pre>
Normal HTML collapses runs of spaces and ignores line breaks. Inside <pre> the browser applies white-space: pre, so the text renders as typed. One exception: a single newline straight after the opening <pre> tag is dropped, which lets you start the content on its own line without adding a blank first line.
Tags still work inside <pre>. To show literal HTML, escape it: write < for < and & for &.
Attributes
| Attribute | Description |
|---|---|
| — | Only the global attributes apply. The old width attribute is deprecated; set the width with CSS instead. |
Common examples
A code block with highlighting class
The usual pattern for code: <pre> keeps the formatting, <code> says it’s code.
Text art and fixed layouts
Anything that relies on exact spacing — ASCII art, aligned columns, poems with indentation — keeps its shape in <pre>.
Wrapping long lines
By default long lines run off the side. white-space: pre-wrap keeps spaces but wraps at the edge.
<pre> vs CSS white-space
<pre> means “this text is preformatted — its spacing is part of the content”. CSS white-space: pre (or pre-wrap) only changes how spaces and line breaks are displayed, without adding any meaning.
Use <pre> for code, command-line output and text art, where losing the spacing would change the content. Use CSS white-space when you just want normal text, such as a user’s address or a message they typed, to keep its line breaks.
| <pre> | white-space: pre-wrap | |
|---|---|---|
| Adds meaning | Yes (preformatted) | No (visual only) |
| Default font | Monospace | Unchanged |
| Best for | Code, text art | User text with line breaks |
Common mistakes to avoid
- Using pre for layout. Lining up content with spaces breaks on small screens; use CSS grid or flexbox.
- Unescaped HTML inside pre. Tags inside
<pre>still run; write<to show a<. - Accidental first-line indentation. Spaces before the first line of code in your HTML file show up in the page.
- Pages that scroll sideways on phones. Add
overflow-x: autoorpre-wrapso long lines don’t widen the whole page.
Accessibility & SEO tips
- Give text art a
role="img"and anaria-label, otherwise screen readers read out every slash and bracket. - Make scrollable code blocks reachable by keyboard with
tabindex="0", so people without a mouse can scroll them. - Code in
<pre>is indexed as text, so real, copyable examples help tutorial pages rank for coding questions.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.