HTML <pre> Tag

What You’ll Learn

The <pre> tag preserves spaces and line breaks for code, poetry, and fixed-layout text. This guide covers syntax, pairing with code, common use cases, and best practices for beginners.

What Is the <pre> Tag?

The <pre> tag, short for preformatted text, is an HTML element designed to preserve both spaces and line breaks. It is particularly useful when you want to display code blocks or any text where formatting and spacing are crucial.

It replaced the obsolete <plaintext> and <listing> tags as the standard way to show unmodified text layout in modern HTML.

📝 Syntax

Wrap your code or text within opening <pre> and closing </pre> tags:

<pre>
  Your Code or Text Here
</pre>

Syntax Rules

• Use pre for block content that needs preserved whitespace.
• Nest code inside pre when displaying programmatic source code.
• Indentation inside the tag is visible — align your source carefully.
• Escape < and & when showing raw HTML in a pre block.

⚖️ <pre> vs <code> vs <p>

Examples Gallery

Display code blocks and text that must keep every space and line break.

function exampleFunction() {
  return "Hello, World!";
}

<pre>
  <code>
    // Your multiline code here
    function exampleFunction() {
      return "Hello, World!";
    }
  </code>
</pre>

// Your multiline code here
function exampleFunction() {
  return "Hello, World!";
}

<pre>
  This      text
  will      be
  displayed exactly
  as       written.
</pre>

This      text
  will      be
  displayed exactly
  as       written.

♿ Accessibility

• Use pre + code for source — Screen readers announce code semantics correctly.
• Keep lines readable — Avoid extremely long unbroken lines; enable horizontal scroll with CSS.
• Provide context — Add a heading or caption describing what the code block demonstrates.
• Escape HTML entities — Show literal tags using < so content is not parsed.

💡 Best Practices