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.

Practice

1. What does the <br> tag do in HTML?

easy

A. It makes text bold.

B. It adds a line break inside text.

C. It creates a horizontal line across the page.

D. It inserts an image.

Solution

1. Step 1: Understand the purpose of <br>

   The <br> tag is used to break a line and continue text on the next line.

2. Step 2: Compare with other tags

   The <hr> tag creates a horizontal line, not a line break. Bold text uses <strong> or <b> tags. Images use <img> tag.

3. Final Answer:

   It adds a line break inside text. -> Option B

4. Quick Check:

   <br> = line break [OK]

Hint: Remember: <br> breaks line, <hr> draws line [OK]

Common Mistakes:

• Confusing <br> with <hr>
• Thinking <br> makes text bold
• Using <br> to insert images

2. Which of the following is the correct syntax to add a horizontal rule in HTML?

easy

A.

B. <hl>

C. <line>

D.

Solution

1. Step 1: Identify the tag for horizontal rule

   The correct tag to add a horizontal line is <hr>.

2. Step 2: Check other options

   <br> adds a line break, <line> and <hl> are not valid HTML tags.

3. Final Answer:

   <hr> -> Option D

4. Quick Check:

   <hr> = horizontal rule [OK]

Hint: Use <hr> for horizontal lines, not <br> [OK]

Common Mistakes:

• Using <br> instead of <hr>
• Typing invalid tags like <line> or <hl>
• Forgetting <hr> is self-closing

3. What will the following HTML code display?

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

medium

A. Hello and World on the same line, then a horizontal line, then Goodbye below.

B. Hello and World on the same line, no horizontal line, then Goodbye below.

C. Hello and World on separate lines, then a horizontal line, then Goodbye below.

D. Hello and World on separate lines, no horizontal line, then Goodbye below.

Solution

1. Step 1: Analyze <br> effect

   The <br> tag breaks the line between "Hello" and "World", so they appear on separate lines.

2. Step 2: Analyze <hr> effect

   The <hr> tag adds a horizontal line below "World" before the next paragraph "Goodbye".

3. Final Answer:

   Hello and World on separate lines, then a horizontal line, then Goodbye below. -> Option C

4. Quick Check:

   <br> = line break, <hr> = horizontal line [OK]

Hint: <br> breaks line, <hr> draws line below [OK]

Common Mistakes:

• Thinking <br> keeps text on same line
• Ignoring the horizontal line from <hr>
• Confusing paragraph tags with line breaks

4. Find the error in this HTML snippet:

<p>Line one<br><hr>Line two</p>

medium

A. Using <hr> inside a <p> tag is invalid HTML.

B. <br> tag is missing a closing tag.

C. <hr> should be written as <hr/> to work.

D. <p> tag should be closed before <br>.

Solution

1. Step 1: Check tag nesting rules

   The <hr> tag is a block-level element and should not be inside a <p> tag, which is for text paragraphs.

2. Step 2: Validate other tags

   <br> is self-closing and does not need a closing tag. <hr> can be written as <hr> or <hr/> in HTML5. <p> can contain <br> but not <hr>.

3. Final Answer:

   Using <hr> inside a <p> tag is invalid HTML. -> Option A

4. Quick Check:

   <hr> not allowed inside <p> [OK]

Hint: Block tags like <hr> can't go inside <p> [OK]

Common Mistakes:

• Thinking <br> needs closing tag
• Believing <hr> must be self-closed
• Ignoring tag nesting rules

5. You want to separate two paragraphs with a visible line and also add a blank line between them. Which HTML code achieves this correctly?

hard

A. First paragraph.Second paragraph.

B. First paragraph.Second paragraph.

C. First paragraph.Second paragraph.

D. First paragraph.<br>Second paragraph.

Solution

1. Step 1: Understand spacing and line rules

   To add a blank line, use a <br> inside a paragraph or a separate paragraph with <br>.

2. Step 2: Place horizontal rule correctly

   The <hr> tag should be outside paragraphs to separate them visually.

3. Step 3: Evaluate options

   First paragraph.

   
   

   ---

   
   

   Second paragraph.

   uses <br> outside paragraphs which is invalid.

   First paragraph.

   ---

   Second paragraph.

   misses blank line.

   First paragraph.

   <br>

   ---

   Second paragraph.

   uses literal <br> text, not tag.

   First paragraph.

   
   

   ---

   Second paragraph.

   correctly uses a paragraph with <br> for spacing and <hr> between paragraphs.

4. Final Answer:

   <p>First paragraph.</p><p><br></p><hr><p>Second paragraph.</p> -> Option A

5. Quick Check:

   Use <p><br></p> for blank line, <hr> outside paragraphs [OK]

Hint: Use <p><br></p> for space, <hr> between paragraphs [OK]

Common Mistakes:

• Placing <br> outside paragraphs
• Using literal <br> text instead of tag
• Putting <hr> inside paragraphs