Line breaks and horizontal rules in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this HTML snippet?

Look at this HTML code and choose what you will see in the browser.

HTML

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

A Hello and World appear on the same line with a space between.

B Only Hello appears; World is hidden.

C HelloWorld appears as one word with no space.

D Hello and World appear on two separate lines.

💡 Hint

The
tag creates a line break inside text.

The
tag forces the text after it to start on a new line, so Hello and World appear on separate lines.

📝 Syntax

intermediate

Which option correctly adds a horizontal rule in HTML?

Choose the correct HTML tag that creates a horizontal line across the page.

A <line>

B <break>

C <hr>

D <hline>

💡 Hint

The horizontal rule tag is a self-closing tag with two letters.

The

---

tag creates a horizontal line. Other tags like , , or do not exist in HTML.

🧠 Conceptual

advanced

What is the difference between
and

---

in HTML?

Choose the option that best explains the difference between these two tags.

A <br> inserts a line break inside text; <hr> inserts a horizontal line separating content sections.

B <br> creates a horizontal line; <hr> creates a line break inside text.

C <br> and <hr> both create horizontal lines but with different thickness.

D <br> is used for paragraphs; <hr> is used for line breaks.

💡 Hint

Think about how text flows and how sections are separated visually.

breaks text onto a new line without extra space, while

---

draws a horizontal line to separate content visually.

❓ accessibility

advanced

How should you improve accessibility when using

---

tags?

Which option is the best practice to make horizontal rules accessible to screen readers?

A Use <hr> without any attributes; screen readers ignore it automatically.

B Add an aria-label or role="separator" to describe the purpose of the <hr>.

C Replace <hr> with multiple <br> tags for better accessibility.

D Add a title attribute with decorative text to the <hr>.

💡 Hint

Think about how screen readers understand page structure.

Adding aria-label or role="separator" helps screen readers identify the

---

as a meaningful separator, improving accessibility.

❓ selector

expert

Which CSS selector targets only
elements inside paragraphs?

Choose the CSS selector that applies styles only to
tags that are inside

tags.

A p br

B br p

C p > br

D p + br

💡 Hint

Think about descendant selectors versus child selectors.

The selector 'p br' targets all
elements inside any

, at any depth. 'p > br' targets only direct children, but
is usually inline and direct child, so both might work but 'p br' is more general and correct. 'br p' is invalid because

cannot be inside
. 'p + br' targets a
immediately after a

sibling, which is different.

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