Line breaks and horizontal rules in HTML - Mini Project: Build & Apply

Line Breaks and Horizontal Rules in HTML

📖 Scenario: You are creating a simple webpage for a small bakery. The page needs to show a welcome message, a short description, and separate sections using lines to make it easy to read.

🎯 Goal: Build a basic HTML page that uses line breaks to separate text lines and horizontal rules to divide sections visually.

📋 What You'll Learn

Use the <br> tag to create line breaks inside a paragraph.

Use the <hr> tag to add horizontal lines between sections.

Create a semantic HTML structure with <header>, <main>, and <footer>.

Include a lang attribute in the <html> tag and a charset meta tag.

Make sure the page is responsive and accessible.

💡 Why This Matters

🌍 Real World

Line breaks and horizontal rules help organize text and sections on webpages, making content easier to read and visually appealing.

💼 Career

Understanding how to structure content with line breaks and horizontal rules is a fundamental skill for web developers and designers creating user-friendly websites.

1

Create the basic HTML structure

Write the basic HTML5 skeleton with <!DOCTYPE html>, <html lang="en">, <head> with a <meta charset="UTF-8">, and an empty <body>.

HTML

Hint

Start with the standard HTML5 document structure including language and charset.

2

Add header and main sections with text

Inside the <body>, add a <header> with an <h1> that says "Welcome to Our Bakery". Then add a <main> with a <p> containing the text "Fresh bread and pastries every day." Use a <br> tag inside the paragraph to break the line between "bread" and "and pastries".

HTML

    
    Bakery Welcome



    


    

Hint

Use <br> inside the paragraph to split the text into two lines.

3

Add horizontal rules to separate sections

Add a horizontal rule <hr> after the <header> and another <hr> after the <main> to visually separate the sections.

HTML

    
    Bakery Welcome



    Welcome to Our Bakery



    Fresh breadand pastries every day.

Hint

Place <hr> tags right after the closing </header> and </main> tags.

4

Add footer with contact info

Add a <footer> after the last <hr>. Inside the footer, add a <p> with the text "Contact us at [e-mail]".

HTML

    
    Bakery Welcome



    Welcome to Our Bakery



    Fresh breadand pastries every day.

Hint

The footer goes after the last horizontal rule and before the closing body tag.

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