0
0
HTMLmarkup~15 mins

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

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.
Progress0 / 4 steps
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
Need a 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
Need a 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
Need a 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 info@bakery.com".
HTML
Need a hint?
The footer goes after the last horizontal rule and before the closing body tag.