<pre>: The PRE Element
Last updated: 2026-10-13
<pre>The PRE Element
Preformatted text preserving spaces and line breaks in a monospace font; ideal for code or poetry.
| Category | Text Content |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </pre> tag |
| Status | Standard |
📝 Syntax
<pre>preserves
indentation and
line breaks</pre>▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <pre> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： Whitespace inside pre is shown as-is—avoid extra indentation; often paired with code.
❓ FAQ
QDoes pre preserve line breaks and spaces?
AYes — that is its core function: spaces, line breaks, and indentation from the source render as-is (the browser applies
white-space: pre by default). So mind your HTML source: start the content right after the opening tag or your indentation will show.QShould pre and code be used together?
ARecommended:
<pre><code>code</code></pre> — pre preserves the layout and code declares the code semantics. A bare pre still displays, but screen readers and crawlers will not know it is code.QWhat if code in pre overflows?
AControl horizontal scrolling with CSS:
pre { overflow-x: auto; } with a constrained container width gives you a scrollbar. Avoid white-space: pre-wrap to force wrapping — broken code lines hurt readability; honest scrolling is better.🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
