Line breaks and horizontal rules in HTML

Introduction

Line breaks and horizontal rules help organize content visually. They make text easier to read and separate sections clearly.

When you want to start a new line without starting a new paragraph.

When you want to add a visible line to separate different parts of a page.

When you want to improve readability by breaking long text into smaller parts.

When you want to create a simple divider between topics or sections.

When you want to control spacing in text without extra paragraphs.

Syntax

HTML

<br>
<hr>

<br> creates a line break, like pressing Enter once in a text editor.

<hr> creates a horizontal line across the page to separate content.

Examples

Adds a line break so the second sentence starts on a new line.

HTML

This is line one.<br>This is line two.

Inserts a horizontal line between two paragraphs.

HTML

First paragraph.<hr>Second paragraph.

Two line breaks create an empty line space between words.

HTML

Hello<br><br>World

Sample Program

This page shows how <br> moves text to a new line inside a paragraph. The <hr> creates a horizontal line to separate sections.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line Breaks and Horizontal Rules</title>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This is the first line.<br>This is the second line right below it.</p>
  <hr>
  <p>Here is a new section separated by a horizontal line.</p>
</body>
</html>

Important Notes

The <br> tag is empty and does not need a closing tag.

The <hr> tag is also empty and creates a visible line by default.

Use <br> sparingly to avoid messy text layout; paragraphs are usually better for spacing.

Summary

<br> adds a line break inside text.

<hr> adds a horizontal line to separate content.

Both tags help organize and improve the look of your web page.

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