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.

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