|

HTML 4 💻 Paragraph, Preformatted text and Line Break

Bykronos

Now let’s add some content to our page structure. We’ll use paragraphs, line breaks, and preformatted text to control how text is displayed.

The Paragraph Element <p>

The <p> element represents a paragraph of text. It automatically starts on a new line with a small space above it.

<h1>Welcome to My Website</h1>
<h2>About This Site</h2>
<p>This is a paragraph of text. It will start on a new line and have some spacing above it.</p>
<p>This is another paragraph. Notice the space between paragraphs.</p>

Key Points About Paragraphs:

  • Browsers automatically remove extra spaces and line breaks inside a <p> element
  • Multiple spaces are collapsed into a single space
  • Line breaks in your HTML code do not create line breaks in the browser

Example of Space Collapsing:

<p>This    text   has     many    spaces.</p>
<!-- Browser displays: "This text has many spaces." -->

<p>This text
is written on
multiple lines
in the code.</p>
<!-- Browser displays: "This text is written on multiple lines in the code." -->

The Line Break Element <br>

To force a line break within a paragraph, use the <br> element (a self-closing tag).

<p>
    This is the first line.<br>
    This is the second line.<br>
    This is the third line.
</p>

Browser Display:

This is the first line.
This is the second line.
This is the third line.

Note: <br> is an empty element — it has no content and no closing tag.

The Preformatted Text Element <pre>

The <pre> element displays text exactly as it is written in the HTML file — preserving all spaces, line breaks, and formatting.

<h2>Using the Pre Element</h2>
<pre>
    This text    keeps    all    spaces.
    It also preserves line breaks.

    Even    blank    lines    are    shown!
</pre>

Browser Display:

    This text    keeps    all    spaces.
    It also preserves line breaks.

    Even    blank    lines    are    shown!

When to Use <pre>:

  • Displaying code snippets
  • Showing ASCII art
  • Preserving formatted text like poetry
  • Any text where spacing and line breaks matter

Complete Example Using All Three Elements

Here’s a complete example showing headings, paragraphs, line breaks, and preformatted text together:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Formatting Examples</title>
</head>
<body>

    <h1>Text Formatting Guide</h1>

    <h2>1. Paragraphs</h2>
    <p>This is a normal paragraph. All extra spaces and line breaks are ignored by the browser.</p>
    <p>This is another paragraph. Notice the automatic spacing between paragraphs.</p>

    <h2>2. Line Breaks</h2>
    <p>
        This line ends with a break.<br>
        This text starts on a new line.<br>
        You can use multiple breaks for extra spacing.<br><br>
        This text has two breaks before it.
    </p>

    <h2>3. Preformatted Text</h2>
    <p>Here's how the same text looks inside a pre element:</p>
    <pre>
    This line has     multiple    spaces.
    This is on a new line.

        This line is indented.
    And this preserves the exact format.
    </pre>

    <h2>4. Comparison</h2>
    <h3>Using a Paragraph:</h3>
    <p>
        This    text    has    extra    spaces.
        It is written on multiple lines.
        The browser collapses everything.
    </p>

    <h3>Using Preformatted Text:</h3>
    <pre>
        This    text    has    extra    spaces.
        It is written on multiple lines.
        The browser preserves everything!
    </pre>

</body>
</html>

Quick Reference

ElementPurposePreserves Spaces?Preserves Line Breaks?
<p>Regular paragraph❌ No❌ No
<br>Single line breakN/A✅ Yes (adds one)
<pre>Preformatted text✅ Yes✅ Yes

Pro Tip: Use paragraphs for regular content, line breaks for visual spacing within text, and preformatted text when you need to display code or other formatted content exactly as typed.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!