HTML pre Tag: How to Display Preformatted Text

The HTML <pre> tag keeps the original format of your text. It shows spaces and line breaks exactly as you type them. This article explains how it works and when to use it.

Understand the <pre> Tag in HTML

The <pre> tag shows preformatted content. The browser does not collapse spaces or remove line breaks. It displays the text as-is.

Use it for full code blocks, fixed-layout text, or any format that must stay exact.

The syntax looks like this:

<pre>
Text or code
Line 2 here
    Indented line
</pre>

Place the content inside the tag exactly as you want it to appear. The browser copies the same layout.

Use it for:

• Full code blocks
• Program output with line breaks
• ASCII art
• Text files with exact layout

This tag is not for short snippets. Use <code> for that.

So, how <pre> preserves whitespace and line breaks?

The browser reads each line break and space in the tag. It keeps them in the output. Other tags collapse white space, but <pre> does not.

The tag uses a monospace font by default. This keeps all characters the same width.

Difference Between <pre> and <code>

Here is each one in depth:

• The <pre> tag shows preformatted blocks. It keeps every line and space.
• The <code> tag shows small bits of program text. It does not keep spaces or layout.

This table shows you the key differences:

How to Style <pre> with CSS

You can change styles and scroll behavior.

<style>
  pre {
    background: #f4f4f4;
    padding: 10px;
    font-size: 14px;
    overflow-x: auto;
    border-left: 3px solid #ccc;
  }
</style>

This style adds light background, left border, and scroll for long lines.

Nest <code> Inside <pre>

Use this to show code with proper spacing and layout.

<pre><code><?php
echo "Hello";
?></code></pre>

This keeps format and marks the content as code.

Examples of <pre> Tag in HTML

Show a Full Code Block:

<pre>
function sayHello() {
  console.log("Hi");
}
sayHello();
</pre>

This example shows a JavaScript function. The code keeps each indent and line break. Readers can copy the whole block without fixing the layout. You do not need extra CSS. The browser keeps the format.

Display Program Output:

<pre>
Welcome to the system

Options:
  1. Start
  2. Stop
  3. Exit
</pre>

This output looks like a terminal or command result. Each line is fixed. The layout matches what a user would see in a real program. You can use this for documentation or system guides. The fixed width keeps each option under the right space.

ASCII Art:

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

This shows a small ASCII drawing. The lines must not break. The spaces must stay in place. The <pre> tag keeps the shape of the drawing. You can display visual text shapes like maps or flow diagrams. Other tags break the shape. This tag keeps it safe.

Indented Text

<pre>
Chapter 1: Start

    This line begins with a tab.
    Each next line keeps its indent.
</pre>

This shows structured text with clear indentation. You can write books, logs, or formatted data like JSON or XML. The tag keeps every tab. Readers see the exact layout. This gives control over how the text appears. You can use it to teach structure or spacing in formats.

Wrapping Up

In this article, you learned what the <pre> tag does and how it works. You also saw how to style it and use it in full examples.

Here is a quick recap:

• Use <pre> for content that must keep spaces and breaks.
• Combine it with <code> for full code blocks.
• Style it with CSS to match your design.
• Use it for code, output, art, and indented text.

FAQs

<pre><code>
echo "Hello";
</code></pre>

Similar Reads