Paragraphs, Line Breaks & Dividers
Content without paragraphs is an unreadable wall of text. The <p> tag formats text blocks with automatic margins. When you need a break without a new paragraph, use self-closing <br>, and use <hr> to draw clean dividers.
"<p> is like starting a new paragraph in a novel. <br> is like hitting Shift+Enter in a chat window to drop to the next line without sending the message. <hr> is drawing a crisp dividing line in your notebook."
Deep Dive: How It Works
<p>: Wraps standard prose text. Browsers automatically add top and bottom spacing around paragraphs.
<br>: Stands for "break". It is an "empty" or self-closing tag (no </br> required). It forces an immediate line break.
<hr>: Stands for "horizontal rule". Draws a thematic divider line between topics.
Syntax Blueprint
<p>Line 1<br>Line 2</p> <hr> <p>Next Topic</p>
<p> contains text, <br> creates single-line breaks, <hr> creates horizontal dividers.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Writing </br> or </hr>Why it happens: Assuming every single tag requires a closing counterpart.
How to fix: Tags without inner content like <br>, <hr>, and <img> are self-closing void elements.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Create two paragraphs with a horizontal divider
- Write a <p> tag containing "First Section"
- Add a horizontal rule <hr>
- Write a second <p> tag containing "Second Section"
Finished reading and practicing?
Mark this lesson as completed to update your course progress.