Topic 8 of 57 2. HTML Basics Interactive Tutorial

HTML Paragraph Tag: Syntax, Formatting, and Examples

9 mins read Last updated: 12 Nov 2026 14,100 views

HTML Editor HTML Cheat Sheet 0.00%

On This Page0 sectionsQuick jump to subtopic

Topic Overview & Definition

Key Question

How does the HTML <p> tag format text and handle whitespace?

Direct Answer & Overview

The HTML

tag defines a paragraph of text. Browsers automatically render paragraphs as block-level elements, adding vertical margins above and below. Browsers collapse multiple consecutive whitespace characters and newlines into a single space within

tags.

Comprehensive Step-by-Step Concepts

1) Block-Level Behavior: The

element starts on a fresh line and spans the full available container width. Browsers automatically apply default top and bottom margins (typically 1em). 2) Whitespace Collapsing: In HTML source code, multiple consecutive spaces, tabs, and line breaks inside a

are collapsed into a single space by browser layout engines. 3) Line Breaks with
: To insert a line break without beginning a new paragraph, use the void
tag. Use it judiciously for addresses or poem verses, not for adding artificial vertical spacing. 4) Horizontal Dividers with

: The

tag represents a thematic break between paragraph topics, typically rendered as a subtle horizontal rule. 5) Preformatted Text Alternative: When whitespace and line breaks must be preserved exactly as typed (such as code or ASCII art), use the

tag instead of

Runnable HTML5 Code Example & Practical Implementation

index.html

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Paragraphs and Formatting</title>
</head>
<body>
    <article>
        <h2>The Power of Semantic Paragraphs</h2>
        <!-- Standard Paragraph -->
        <p>This is the first paragraph. Browsers automatically insert vertical margin spacing above and below paragraphs.</p>
        
        <!-- Whitespace Collapsing Demo -->
        <p>Multiple     spaces     and
        line breaks in source code
        collapse into a single space.</p>
        
        <!-- Line Break for Postal Address -->
        <p>
            OperateTools Headquarters<br>
            123 Innovation Boulevard, Suite 400<br>
            San Francisco, CA 94105
        </p>
        
        <!-- Thematic Divider -->
        <hr>
        
        <p>This paragraph begins a completely new topic after the horizontal divider.</p>
    </article>
</body>
</html>

Key Takeaways, Best Practices & Standards

Best Practice & Standards

Never use empty

or multiple
tags for visual spacing. Control all spacing through CSS margin and padding.

Common Technical & Interview Questions

Q1: Can a
tag contain another
tag or a
element?

A1: No. In HTML specifications,

elements can only contain phrasing (inline) content. If the browser encounters a block element (like

or another

) inside an open

, it automatically closes the first

Q2: Why should you avoid using multiple

tags to create spacing between elements?

A2: Using
for layout spacing creates accessibility problems for screen readers and breaks responsive layouts. Vertical spacing should always be managed using CSS margin or padding properties.

Q3: How does the

tag differ from the

tag?

A3: The

 (preformatted text) tag displays text in a fixed-width monospace font and preserves all spaces, tabs, and line breaks exactly as written in the source code.

All HTML Topics

Previous TopicHTML Headings: H1 to H6 Tags Explained with Examples

Next TopicHTML Comments: Types, Syntax, and Examples