HTML Pre Tag: Syntax, Usage, and Examples

The HTML pre tag preserves both spaces and line breaks, allowing you to display text exactly as you write it in your code. It’s ideal for presenting preformatted content like code snippets, poetry, ASCII art, or any text where spacing and line structure matter. The HTML pre tag gives you precise control over how content appears on the screen—without needing extra styling or scripting.

How to Use the HTML Pre Tag

The basic syntax of the pre tag HTML is simple:

<pre>
Line 1
    Line 2 (with indentation)
Line 3
</pre>

Browsers render everything inside a <pre> block exactly as it appears in the source code. Unlike regular HTML text, where the browser collapses multiple spaces and ignores line breaks, the <pre> element treats them as significant.

You can also include inline elements like <strong>, <a>, or <span> inside the pre tag if needed, although you typically avoid complex nesting.

When to Use the HTML Pre Tag

Use the HTML pre tag when you want to preserve the exact formatting of text. This is especially helpful for content that loses meaning or structure when line breaks or indentation are removed.

Displaying Code Snippets

The most common use of the pre tag in HTML is to display code examples, especially when teaching or documenting.

<pre>
function greet(name) {
    console.log("Hello, " + name);
}
</pre>

This ensures your code remains readable and keeps its original structure.

Showing ASCII Art or Text Patterns

If you're creating retro-style graphics or diagrams using characters, the <pre> tag preserves the layout.

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

Without <pre>, this would collapse into a single line and lose its visual shape.

Preserving Data or Log Files

When displaying log outputs, error messages, or terminal responses, line breaks and spacing are important. The pre tag HTML keeps that data intact.

<pre>
[INFO] Server started at 10:24 AM
[WARN] High memory usage detected
[ERROR] Failed to connect to database
</pre>

This lets users easily scan messages and understand sequences or hierarchy.

Examples of Pre Tag HTML in Action

Basic Preformatted Text

<pre>
Name:     Sarah
Role:     Developer
Location: Remote
</pre>

This shows label-value pairs aligned for easy reading.

Preformatted HTML Code Example

<pre>
&lt;div class="container"&gt;
    &lt;p&gt;Hello World&lt;/p&gt;
&lt;/div&gt;
</pre>

To display angle brackets in HTML, you escape them using < and >. This prevents browsers from trying to render them as real HTML.

Combining <pre> with <code>

While <pre> preserves spacing, the <code> tag adds semantic meaning. When used together, you get readable formatting and proper context for screen readers or search engines.

<pre><code>let x = 5;
let y = 10;
console.log(x + y);</code></pre>

This combination is the standard approach in developer documentation.

Pre Tag with Styling

You can style the pre tag in HTML using CSS to improve readability or match your site’s design:

<style>
pre {
    background-color: #f4f4f4;
    padding: 15px;
    font-family: monospace;
    border-left: 4px solid #ccc;
}
</style>

<pre>
SELECT * FROM users WHERE active = 1;
</pre>

This gives the block a clean, readable look while preserving structure.

Learn More About the Pre Tag in HTML

Differences Between Pre and Regular Paragraph Text

By default, browsers collapse multiple spaces and line breaks in regular paragraph or span text:

<p>This    sentence has   extra spaces.</p>

This renders as:

This sentence has extra spaces.

But with the pre tag HTML, those extra spaces stay exactly as written:

<pre>This    sentence has   extra spaces.</pre>

This renders exactly as typed.

Styling Tips for Preformatted Blocks

The HTML pre tag uses a monospace font by default, but you can override it or enhance its appearance using CSS:

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: auto;
}

• white-space: pre-wrap allows wrapping long lines without losing whitespace.
• word-wrap: break-word ensures long strings don’t overflow their container.
• overflow: auto adds scrollbars if needed.

These options make your preformatted content easier to read, especially on mobile or narrow screens.

Accessibility Considerations

The <pre> element doesn’t provide semantic meaning by itself—it just controls layout. If you're displaying actual code, wrap it in a <code> tag inside the <pre> block:

<pre><code>const greet = name => `Hello, ${name}`;</code></pre>

This helps screen readers understand that the text represents source code.

Also consider using ARIA roles like role="presentation" or role="textbox" if you’re building interactive tools like online editors.

Pre Tag vs Other Elements

• Use <pre> for preserving spacing and line breaks.
• Use <code> for marking up inline or block code, even without preserved spacing.
• Use <blockquote> for quoting long passages.
• Use <p> for plain paragraphs where line breaks and extra spaces don’t matter.

Each serves a unique role. If you care about formatting, the pre tag is the most reliable option.

Use Cases in Real Projects

You’ll commonly see the pre tag HTML used in:

• Developer blogs and tutorials
• Markdown-to-HTML converters
• CMS platforms with code examples
• Documentation websites like MDN or Stack Overflow
• Online editors and code playgrounds
• Technical reports and whitepapers

It’s also helpful in admin dashboards where you need to preview or export raw data.

Nesting Inside or Around Pre Tags

Avoid placing block-level elements like <div>, <section>, or headings inside a pre tag. Stick to inline elements like <code>, <strong>, or <span> if necessary. Also avoid nesting multiple <pre> tags unless you really need to separate formatting contexts.

<!-- Good -->
<pre><code>def hello():\n    return "Hi"</code></pre>

<!-- Bad -->
<pre>
    <div>This is a div</div>
</pre>

Browsers may still render the second example, but it’s not valid or predictable.

Using the HTML pre tag is the best way to present structured or formatted content that requires fixed spacing. Whether you’re sharing code, output logs, or visual layouts made with characters, the pre tag in HTML gives you full control over how text appears. It keeps formatting intact without relying on CSS hacks, extra JavaScript, or complex markup.