Why Preformatted text in HTML? - Purpose & Use Cases

The Big Idea

Discover how to keep your text looking exactly right on your webpage without extra hassle!

The Scenario

Imagine you want to show a poem or a piece of code on your webpage exactly as it looks, with all the spaces and line breaks preserved.

The Problem

If you just type it normally in HTML, the browser will ignore extra spaces and line breaks, making your carefully formatted text look messy and hard to read.

The Solution

The <pre> tag keeps all spaces, tabs, and line breaks exactly as you type them, so your text appears just like you want it.

Before vs After

✗ Before

This    is    spaced
text on multiple lines.

✓ After

<pre>This    is    spaced
text on multiple lines.</pre>

What It Enables

You can display text with exact formatting, like code snippets or poems, making your content clear and easy to understand.

Real Life Example

Showing a block of computer code on a tutorial website where indentation and line breaks matter for understanding.

Key Takeaways

Browsers ignore extra spaces and line breaks by default.

The <pre> tag preserves all formatting exactly.

This helps display code, poems, or any text needing precise layout.