HTML <pre> Tag: Preserve Spaces and Line Breaks

The HTML <pre> element displays preformatted text. Spaces, tabs and line breaks in the source are preserved instead of being collapsed like ordinary HTML text.

<pre>
Welcome to plus2net.
PHP        Server-side scripting
HTML       Web page markup
JavaScript Client-side scripting
</pre>

The browser displays the text using a monospace font by default and preserves its whitespace formatting.

Why Whitespace Changes in Normal HTML Top ↑

In normal HTML text, sequences of spaces, tabs and line breaks are usually collapsed into a single displayed space.

<p>
PHP       Server-side scripting
HTML      Web page markup
</p>

The indentation visible in the source is not normally preserved in the rendered paragraph. Use <pre> when the whitespace itself is meaningful.

Basic <pre> Syntax Top ↑

<pre>
Some preformatted text
</pre>

The content is rendered using CSS behavior equivalent to preserved whitespace. The browser's default stylesheet normally gives <pre> a monospace font.

Preserving Alignment and Line Breaks Top ↑

Here is a source example with aligned columns:

<pre>
Welcome to plus2net,   you can learn following scripts here.
PHP              Server-side scripting language
ASP              Server-side scripting language
HTML             Tags used in a web browser
JavaScript       Client-side scripting language
</pre>

Rendered output:

Welcome to plus2net,   you can learn following scripts here.
PHP              Server-side scripting language
ASP              Server-side scripting language
HTML             Tags used in a web browser
JavaScript       Client-side scripting language

The spaces and line breaks are retained, making <pre> useful when alignment is part of the content.

Displaying HTML Tags Inside <pre> Top ↑

If you want to display HTML markup as text, escape the characters that would otherwise be interpreted as markup.

Source:

<pre><code>
&lt;h2&gt;Hello&lt;/h2&gt;
</code></pre>

Displayed code:

<h2>Hello</h2>

<pre> and <code> Together Top ↑

Use <code> for computer code and place it inside <pre> when the code contains meaningful indentation or multiple lines.

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

For a short inline fragment such as SELECT *, <code> alone is usually enough. For multi-line code, <pre><code>...</code></pre> is the usual semantic combination.

Styling Preformatted Text with CSS Top ↑

Use CSS for background, border, padding, width and scrolling.

<style>
pre.styled-pre {
  background-color: #f5f5f5;
  border-left: 3px solid #ccc;
  padding: 10px;
  overflow-x: auto;
}
</style>

<pre class="styled-pre">
function helloWorld() {
  console.log("Hello, world!");
}
</pre>

For a tutorial site, horizontal scrolling is often preferable for source code because forced wrapping can make long code lines harder to copy and read.

Handling Long Lines Top ↑

By default, preformatted text preserves line structure and can overflow horizontally. One option is to allow scrolling:

<style>
pre {
  overflow-x: auto;
}
</style>

If the content should wrap instead, use white-space: pre-wrap:

<style>
pre.wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
</style>

<pre class="wrap">
This is a long line that can wrap while still preserving other whitespace.
</pre>

Leading Newline Behavior Top ↑

HTML has a small special rule for <pre>: a line break immediately after the opening tag is removed from the rendered text.

<pre>
First visible line
Second visible line
</pre>

The first visible line does not begin with an extra blank line merely because the source starts the content on the next line.

Accessibility Considerations Top ↑

Do not use spaces inside <pre> as a substitute for a semantic table, list or layout structure. Preformatted text preserves appearance, but it does not describe relationships between pieces of data.

For ASCII art or text diagrams, provide an accessible description when the visual arrangement conveys information.

<pre role="img" aria-label="A simple smiley face made with ASCII characters">
:-)
</pre>

For structured tabular data, use an HTML table rather than arranging columns with spaces.

Obsolete width Attribute Top ↑

The old width attribute on <pre> is obsolete. Use CSS instead.

<style>
pre.example {
  max-width: 80ch;
}
</style>

The ch CSS unit is based approximately on the width of the 0 character in the current font. It can be useful for text-oriented line lengths, but it is not an exact "number of characters per line" guarantee.

When to Use <pre> Top ↑

• Multi-line source code: preserve indentation and line breaks.
• Logs: retain line-oriented diagnostic output.
• Command-line examples: keep spacing and prompt/output structure.
• ASCII diagrams: preserve a meaningful text layout, with an accessible description when needed.
• Preformatted plain text: show content whose spaces and line breaks are significant.

Do not use <pre> merely to create visual spacing. Use CSS for page layout.

Common <pre> Mistakes Top ↑

Assuming HTML tags are automatically displayed as text Top ↑

<pre> preserves whitespace but does not disable HTML parsing. Escape markup characters when displaying source code.

Using <br> inside every preformatted line Top ↑

The element already preserves source line breaks, so extra <br> elements are usually unnecessary.

Using <pre> instead of semantic structure Top ↑

Use tables, lists and headings when the content has those meanings. Spaces alone do not create semantic relationships.

Forcing all code to wrap Top ↑

Wrapping may make source code harder to follow. Horizontal scrolling is often better for code, while wrapping can work well for long prose or logs.

Using the obsolete width attribute Top ↑

Control width and overflow with CSS.

Related Tutorials Top ↑

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: