Line breaks and horizontal rules in HTML - Browser Rendering Trace

Render Flow - Line breaks and horizontal rules

Read <p>

→Create P node

↓

Read text 'Hello'

→Add text node

↓

Read <br>

→Create line break

↓

Read text 'World'

→Add text node

↓

Read <hr>

→Create horizontal rule

↓

Close P

The browser reads the paragraph, adds text nodes, inserts a line break where <br> is, and draws a horizontal line where <hr> is.

Render Steps - 3 Steps

Code Added:<p>HelloWorld</p>

Before

[ ]

(Empty page)

→

After

[HelloWorld]

(Text shown in one line inside a box representing the paragraph)

The paragraph element displays the text 'HelloWorld' in one continuous line.

🔧 Browser Action:Creates DOM node for <p> and text nodes; performs layout and paint.

Code Sample

A paragraph with 'Hello' and 'World' on separate lines and a horizontal line below them.

HTML

<p>Hello<br>World<hr></p>

Render Quiz - 3 Questions

After applying step 2, how does the text inside the paragraph appear?

A Text hidden

B Text all on one line

C Text on two lines with 'World' below 'Hello'

D Text replaced by a horizontal line

Common Confusions - 2 Topics

Why doesn't <br> add extra space like a new paragraph?

<br> only breaks the line but does not add vertical margin or spacing like <p> does. It keeps content visually close.

💡 Use <br> for line breaks inside text; use <p> for separate paragraphs with spacing.

Why does <hr> appear as a line and not text?

<hr> is a self-closing block element that draws a horizontal line by default, not text content.

💡 <hr> visually separates content with a line, unlike text elements.

Property Reference

Element	Default Display	Visual Effect	Common Use
<br>	inline	Inserts a line break, moving following content to next line	Breaking lines inside text without starting a new paragraph
<hr>	block	Draws a horizontal line across the container width	Separating sections or thematic breaks in content

Concept Snapshot

<br> inserts a line break inside text without extra space. <hr> creates a horizontal line across the container. <br> is inline; <hr> is block-level. Use <br> for line breaks, <hr> for section separation. Both are self-closing tags with no closing tag needed.