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.