Line breaks and horizontal rules in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a line break between two sentences.

HTML

<p>Hello, world![1]Welcome to web development.</p>

Drag options to blanks, or click blank then click option'

A<p>

B<hr>

C<br>

D<div>

Attempts:

3 left

💡 Hint

Common Mistakes

Using

---

instead of
which creates a horizontal line, not a line break.

Using

or

which create block elements, not simple line breaks.

The
tag inserts a line break, moving the next content to a new line without starting a new paragraph.

2fill in blank

medium

Complete the code to add a horizontal rule between two sections.

HTML

<section>First section content.</section>[1]<section>Second section content.</section>

Drag options to blanks, or click blank then click option'

A<hr>

B<div>

C<br>

D<span>

Attempts:

3 left

💡 Hint

Common Mistakes

Using
which only breaks the line but does not create a horizontal line.

Using

or which do not create horizontal lines.

The

---

tag creates a horizontal line that visually separates content sections.

3fill in blank

hard

Fix the error in the code to correctly add a line break.

HTML

<p>Line one[1]Line two</p>

Drag options to blanks, or click blank then click option'

A<hr>

B<br/>

C<br>

D<break>

Attempts:

3 left

💡 Hint

Common Mistakes

Using which is not a valid HTML tag.

Using

---

which creates a horizontal line, not a line break.

In HTML5,
and
both work, but
is the XHTML-style self-closing tag and often preferred for clarity.

4fill in blank

hard

Fill both blanks to add a line break and a horizontal rule between paragraphs.

HTML

<p>Paragraph one.</p>[1]<hr>[2]<p>Paragraph two.</p>

Drag options to blanks, or click blank then click option'

A<br>

B<hr>

C<br/>

D<div>

Attempts:

3 left

💡 Hint

Common Mistakes

Using

which creates a block element, not a line break.

Using

---

in blanks which duplicates the horizontal rule.

Use
for a line break and
for another line break. The

---

is already present between paragraphs.

5fill in blank

hard

Fill all three blanks to create a structure with a horizontal rule and two line breaks.

HTML

<header>Welcome</header>[1]<hr>[2]<p>Content starts here.[3]</p>

Drag options to blanks, or click blank then click option'

A<br>

B<hr>

C<br/>

D<div>

Attempts:

3 left

💡 Hint

Common Mistakes

Using

which does not create line breaks.

Using

---

in blanks which duplicates the horizontal rule.

Use
for the first and second blanks to add line breaks before and after the horizontal rule, and
inside the paragraph for a line break.