Paragraphs in HTML - Browser Rendering Trace

Render Flow - Paragraphs

[Read <p>] -> [Create P node] -> [Add text content] -> [Close P] -> [Render block box]

The browser reads the paragraph tag, creates a block box for it, adds the text inside, and then displays it with default spacing.

Render Steps - 3 Steps

Code Added:<p>This is the first paragraph.</p>

Before

→

After

[Paragraph 1]
| This is the first paragraph. |
|____________________________|

The browser creates a block box for the first paragraph and displays the text inside it.

🔧 Browser Action:Creates DOM node for <p>, creates block box, paints text

Code Sample

Two paragraphs stacked vertically with space between them.

HTML

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Render Quiz - 3 Questions

After step 2, how are the two paragraphs arranged visually?

A Stacked vertically with some space between

B Side by side horizontally

C Overlapping each other

D Hidden from view

Common Confusions - 2 Topics

Why do paragraphs have space between them even if I don't add margin?

Browsers apply default top and bottom margin to <p> elements to separate paragraphs visually (see step 3).

💡 Remember: paragraphs have built-in vertical spacing by default.

Why does text inside <p> start on a new line?

<p> is a block element, so it always starts on a new line and takes full width (step 1).

💡 Block elements stack vertically, unlike inline elements.

Property Reference

Element	Default Display	Semantic Meaning	Visual Behavior
<p>	block	Paragraph of text	Starts on new line, full width, vertical margin separates paragraphs

Concept Snapshot

Paragraphs (<p>) are block elements that create separate blocks of text. They start on a new line and take full width. Browsers add default top and bottom margin to separate paragraphs visually. Use <p> to group sentences into readable blocks. Replacing <p> with inline elements removes vertical spacing.