HTML Paragraphs

HTML Paragraphs: Formatting Text Blocks, Line Breaks, and Whitespace

The HTML p element defines a paragraph of text. Browsers automatically start every paragraph on a new line and add vertical margin above and below it so text blocks stay easy to scan.

How Browsers Collapse Whitespace

Inside normal HTML elements like p, browsers ignore extra spaces and line breaks in your source file. Whether you type two spaces or twenty spaces, or press Enter across five lines in your editor, the browser collapses all consecutive whitespace into a single space.

This behavior lets you indent and wrap long lines cleanly in your code editor without changing how visitors see the text.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Paragraphs Demo</title>
</head>
<body>
    <h2>Writing Readable Paragraphs</h2>
    <p>
        Extra spaces     and line breaks
        inside source code collapse into one space in the browser.
    </p>

    <hr>

    <p>742 Evergreen Terrace<br>Springfield, OR 97477</p>

    <pre>
Line 1: Indentation is kept
    Line 2: Four spaces stay intact
    </pre>
</body>
</html>

Choosing Between p, br, hr, and pre

Use p for distinct prose paragraphs. Use br only when a line break carries meaning inside one block, such as postal addresses or lines of poetry. Use hr to signal a thematic topic shift between sections.

When you need every space and newline preserved exactly as typed—such as ASCII diagrams or preformatted logs—wrap the text inside a pre element.

Common Mistakes to Avoid

• Using empty p tags for spacing: Empty paragraphs clutter the DOM and confuse screen readers. Control spacing with CSS margin-bottom.
• Splitting one paragraph with br instead of two p tags: Distinct ideas belong in separate p elements, not one giant block joined by double br line breaks.
• Nesting block tags inside p: Browsers auto-close a p tag as soon as they encounter a div, ul, or h2 inside it.

Frequently Asked Questions

Why do extra spaces disappear inside an HTML paragraph?

HTML parsers collapse consecutive spaces, tabs, and newlines into a single space so developers can indent source files freely.

When should I use the pre tag instead of p?

Use pre when exact spacing and line breaks matter, such as code listings, poetry formatting, or terminal output.