Preformatted text in HTML - Deep Dive

Overview - Preformatted text

What is it?

Preformatted text in HTML is a way to display text exactly as it is typed, including spaces, line breaks, and tabs. It uses the

 tag to preserve the original formatting of the text. This is useful when you want to show code, poetry, or any text where spacing matters. The browser does not change the spacing or line breaks inside this tag.

Why it matters

Without preformatted text, browsers collapse multiple spaces and ignore line breaks, making it hard to show text that relies on exact spacing. This would make displaying code snippets, ASCII art, or formatted data confusing or unreadable. Preformatted text solves this by keeping the text's original shape, helping readers understand the content as intended.

Where it fits

Before learning about preformatted text, you should understand basic HTML tags and how browsers handle whitespace. After this, you can learn about styling preformatted text with CSS or how to display code snippets with syntax highlighting.

Mental Model

Core Idea

Preformatted text shows exactly what you type, preserving spaces and line breaks without change.

Think of it like...

It's like writing a letter on graph paper where every space and line you make stays exactly as you put it, unlike normal paper where extra spaces might be ignored.

┌───────────────────────────────┐
│ <pre>                        │
│   Text inside here           │
│   keeps    all spaces        │
│   and line breaks exactly   │
│   as typed.                 │
│ </pre>                      │
└───────────────────────────────┘

Build-Up - 6 Steps

1

Foundation

Understanding whitespace in HTML

Concept: Browsers normally ignore extra spaces and line breaks in HTML text.

In HTML, if you type multiple spaces or press Enter to create new lines, the browser will usually show just one space and ignore the line breaks. For example, typing "Hello World" will appear as "Hello World" in the browser.

Result

Text appears with single spaces and no visible line breaks despite multiple spaces or new lines in the code.

Knowing that browsers collapse whitespace explains why preformatted text is needed to preserve exact spacing.

2

Foundation

Introducing the <pre> tag

Concept: The

 tag tells the browser to keep all spaces and line breaks as they are.

When you wrap text inside

 and 

, the browser shows the text exactly as typed, including all spaces and line breaks. This is useful for code or text where formatting matters.

Result

Text inside

 displays with all original spaces and line breaks preserved.

The

 tag is a simple way to control how text formatting appears in the browser.

3

Intermediate

Combining <pre> with other tags

🤔Before reading on: do you think you can put links or bold text inside

? Commit to your answer.

Concept: You can nest some inline HTML tags inside

, but it may affect formatting.

Inside

, you can add tags like  or  to style text or add links. However, these tags do not preserve spacing inside themselves, so mixing formatting and preformatted text requires care.

Result

Text inside

 keeps spacing, but styled parts may look different or break alignment.

Understanding how inline tags behave inside

 helps avoid unexpected formatting issues.

4

Intermediate

Styling preformatted text with CSS

🤔Before reading on: do you think CSS can change how

 text looks without breaking formatting? Commit to your answer.

Concept: CSS can style

 text for colors, fonts, and scrollbars without losing the preserved formatting.

You can use CSS properties like font-family, color, background-color, and overflow on

 to improve readability. For example, adding a monospace font and a background color makes code easier to read.

Result

Preformatted text looks styled but still keeps exact spacing and line breaks.

Knowing how to style

 lets you create readable code blocks or formatted text areas.

5

Advanced

Handling long lines inside <pre>

🤔Before reading on: do you think very long lines inside

 wrap automatically or cause horizontal scroll? Commit to your answer.

Concept: By default, long lines in

 do not wrap and cause horizontal scrolling, but CSS can change this behavior.

Long lines inside

 overflow horizontally, creating a scrollbar. Using CSS like 'white-space: pre-wrap;' makes lines wrap inside the 
 block, preserving formatting but avoiding scrollbars.

Result

Preformatted text either scrolls horizontally or wraps lines based on CSS settings.

Controlling line wrapping in

 improves user experience for different content types.

6

Expert

Accessibility considerations for <pre>

🤔Before reading on: do you think screen readers treat

 text differently? Commit to your answer.

Concept: Screen readers recognize

 and read the text preserving pauses for line breaks and spaces, aiding comprehension for code or poetry.

Using

 helps assistive technologies understand that spacing and line breaks are meaningful. However, excessive or improper use can confuse users, so use it only when formatting matters.

Result

Users relying on screen readers get a better experience with properly used

 text.

Accessibility-aware use of

 ensures content is clear for all users, not just visual readers.

Under the Hood

Browsers parse the HTML and normally collapse whitespace characters (spaces, tabs, newlines) into a single space when rendering text. The

 tag changes this behavior by applying CSS 'white-space: pre;' which tells the browser to preserve all whitespace exactly as in the source code. This means the rendering engine does not collapse spaces or ignore line breaks inside 
 elements.

Why designed this way?

The

 tag was introduced early in HTML to allow programmers and writers to display text where spacing is important, like code or poetry. Without it, all HTML text would lose its original formatting, making such content unreadable. The design balances normal text flow with a special container that preserves formatting, avoiding the need for complex markup for every space or line break.

HTML source text
   │
   ▼
[Browser parser]
   │
   ▼
Normal text: collapse whitespace → Rendered text with single spaces

<pre> text: apply 'white-space: pre;' → Rendered text preserving all spaces and line breaks

Myth Busters - 4 Common Misconceptions

Quick: Does

 automatically apply a monospace font? Commit yes or no.

Common Belief: Many think

 always uses a monospace font by default.

Reality: Browsers usually apply monospace fonts to

, but this is a style choice and can be overridden by CSS.

Why it matters: Assuming monospace is automatic can cause layout issues if CSS changes the font, breaking alignment in code blocks.

Quick: Does

 preserve all HTML tags inside it as text? Commit yes or no.

Common Belief: Some believe

 shows all tags inside it as plain text without rendering them.

Reality: HTML tags inside

 are still parsed and rendered normally unless escaped; 
 only preserves whitespace, not tag display.

Why it matters: Misunderstanding this leads to broken layouts or unexpected rendering when mixing tags inside

.

Quick: Does

 text wrap lines by default? Commit yes or no.

Common Belief: People often think

 text wraps lines automatically to fit the screen.

Reality: By default,

 text does not wrap and causes horizontal scrolling if lines are too long.

Why it matters: Expecting wrapping can cause usability problems on small screens or narrow containers.

Quick: Can you use

 to format any text regardless of content? Commit yes or no.

Common Belief: Some think

 is good for all text formatting needs.

Reality:

 is only suitable when exact spacing matters; for general formatting, CSS and other tags are better.

Why it matters: Overusing

 can make pages harder to read and maintain.

Expert Zone

1

Browsers implement

 using the CSS 'white-space: pre;' property, but some subtle differences exist in how tabs and line breaks are handled across browsers.

2

When nesting inline elements inside

, whitespace preservation can be inconsistent, requiring careful testing for alignment-sensitive content.

3

Using

 with 'white-space: pre-wrap;' allows line wrapping while preserving spaces, a subtle but powerful way to improve readability on narrow screens.

When NOT to use

Avoid using

 for general text formatting or layout purposes; instead, use CSS for spacing and line breaks. For code display, consider specialized libraries that add syntax highlighting and better accessibility. For large blocks of text, use paragraphs and CSS to control spacing.

Production Patterns

In production,

 is commonly used to display code snippets, terminal output, or ASCII art. It is often combined with syntax highlighting libraries and styled with CSS for readability. Developers also use 
 with scrollable containers to handle long lines without breaking layout.

Connections

CSS white-space property

Directly related;

 uses 'white-space: pre;' CSS to preserve formatting.

Understanding CSS white-space helps customize how preformatted text behaves beyond the default

 tag.

Text editors and fixed-width fonts

Builds-on the idea of preserving exact spacing for readability.

Knowing how text editors use fixed-width fonts to align code helps appreciate why

 often uses monospace fonts.

Music notation and sheet music

Shares the concept of preserving exact spacing and line breaks to convey meaning.

Just like sheet music spacing guides musicians, preformatted text spacing guides readers to understand structure and timing.

Common Pitfalls

#1 Using

 without escaping HTML tags inside it.

Wrong approach:

This is a div inside pre

Correct approach:

<div>This is a div inside pre</div>

Root cause: Misunderstanding that HTML tags inside

 are still parsed and must be escaped to show as text.

#2 Expecting

 text to wrap automatically on small screens.

Wrong approach:

This is a very long line that will not wrap and causes horizontal scroll on small screens.

Correct approach:

This is a very long line that wraps nicely on small screens.

Root cause: Not knowing that

 disables line wrapping by default and requires CSS to enable wrapping.

#3 Using

 for general paragraph text formatting.

Wrong approach:

This is a paragraph of text that does not need exact spacing.

Correct approach:

This is a paragraph of text that uses normal HTML formatting.

Root cause: Confusing preformatted text with normal text formatting needs.

Key Takeaways

The

 tag preserves all spaces and line breaks exactly as typed, unlike normal HTML text.

Browsers collapse whitespace by default, so

 is essential for displaying code or formatted text correctly.

CSS can style

 text and control line wrapping to improve readability and usability.

Misusing

 or misunderstanding its behavior can cause layout and accessibility problems.

Expert use of

 balances preserving formatting with styling and accessibility for the best user experience.