← Back to All Tags

<pre>

Preserves text formatting and whitespace

Definition and Usage

The <pre> element establishes preformatted text.

Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

Tip: Use the <pre> tag when displaying text where spaces and line breaks are important, such as code, poetry, or ASCII art.
Note: For displaying computer code, it's recommended to wrap <code> inside <pre> for semantic meaning.

Browser Support

The <pre> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

The <pre> tag supports the Global Attributes in HTML.

The <pre> tag also supports the Event Attributes in HTML.

Deprecated: The width attribute was used in older HTML versions but is now deprecated. Use CSS instead to control width.

Examples

Basic Preformatted Text

Display text with preserved whitespace and line breaks:

Example

<pre>
This    text    has    extra    spaces
and line breaks that
     will be preserved
exactly as written.
</pre>

Code Block with Pre and Code

Display computer code with proper semantic markup:

Example

<pre><code>
function greeting(name) {
  console.log("Hello, " + name + "!");
  return true;
}

greeting("World");
</code></pre>

ASCII Art

Create ASCII art that maintains its shape:

Example

<pre>
    /\_/\
   ( o.o )
    > ^ <
   /|   |\
  (_|   |_)
</pre>

Poetry or Lyrics

Display poetry with preserved formatting:

Example

<pre>
Roses are red,
Violets are blue,
HTML is awesome,
And so are you!
</pre>

Directory Structure

Display file system structure:

Example

<pre>
project/
├── src/
│   ├── index.html
│   ├── styles.css
│   └── script.js
├── images/
│   └── logo.png
└── README.md
</pre>

JSON Data

Display formatted JSON or data structures:

Example

<pre><code>
{
  "name": "John Doe",
  "age": 30,
  "skills": ["HTML", "CSS", "JavaScript"],
  "active": true
}
</code></pre>

Styled Preformatted Text

Add custom styling to preformatted text:

Example

<style>
  pre {
    background-color: #f4f4f4;
    border: 1px solid var(--border-color);
    border-left: 4px solid #745af2;
    padding: 16px;
    overflow-x: auto;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
  }
</style>

<pre>
function calculateSum(a, b) {
  return a + b;
}
</pre>

Try it Yourself

Interactive Example

Here's a live example of preformatted text:

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// Calculate first 10 Fibonacci numbers
for (let i = 0; i < 10; i++) {
  console.log(fibonacci(i));
}

<pre> vs <code>

Feature <pre> <code>
Purpose Preserves whitespace and line breaks Indicates computer code
Display Block-level element Inline element
Font Monospace font Monospace font
Whitespace Preserved Collapsed (normal HTML behavior)
Use Case Code blocks, ASCII art, poetry Inline code snippets
Best Practice Use <pre><code> together for code blocks Use alone for inline code references

Common Use Cases

  • Code Snippets: Display programming code with proper indentation
  • ASCII Art: Create text-based graphics and diagrams
  • Poetry/Lyrics: Preserve line breaks in creative writing
  • Configuration Files: Show config files, logs, or terminal output
  • Directory Trees: Display file system structures
  • Formatted Data: Show JSON, XML, or other structured data
  • Email Headers: Display email or HTTP headers
  • Mathematical Notation: Simple text-based formulas

CSS Styling Options

Common CSS properties used with <pre>:

Example

pre {
  /* Handle long lines */
  overflow-x: auto;
  white-space: pre-wrap;  /* Wrap long lines */
  word-wrap: break-word;  /* Break long words */

  /* Styling */
  background-color: #f5f5f5;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 16px;

  /* Typography */
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.6;

  /* Spacing */
  margin: 20px 0;
  max-width: 100%;
}

Accessibility Considerations

  • Screen readers will read the text exactly as formatted, including all spaces
  • Multiple spaces may be read as "space space space" which can be confusing
  • Use aria-label to provide context for complex preformatted content
  • For code blocks, consider using role="code" or wrapping with <code>
  • Ensure sufficient color contrast when styling background and text
  • Make sure horizontal scrolling content is keyboard accessible

Best Practices

  • Use <pre><code> together for code blocks (semantic HTML)
  • Add overflow-x: auto; to handle long lines without breaking layout
  • Consider using white-space: pre-wrap; for better mobile experience
  • Escape HTML entities (<, >, &) when displaying HTML code
  • Don't use <pre> for layout purposes - use CSS instead
  • Keep font size readable (12-16px typically works well)
  • Add syntax highlighting libraries (like Prism.js or highlight.js) for better code presentation
  • Test how preformatted content appears on different screen sizes

HTML Entity Escaping

When displaying HTML code inside <pre>, you must escape special characters:

Example

<pre><code>
&lt;div class="container"&gt;
  &lt;h1&gt;Hello World&lt;/h1&gt;
  &lt;p&gt;This is a paragraph.&lt;/p&gt;
&lt;/div&gt;
</code></pre>

Common HTML entities:

  • < → &lt;
  • > → &gt;
  • & → &amp;
  • " → &quot;

Default CSS Settings

Most browsers will display the <pre> element with the following default values:

Default CSS

pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}

Related Tags