Paragraphs, Line Breaks & Dividers (<p>, <br>, <hr>)

Welcome to Topic 2.2! 📄

In the previous lesson, you learned how to create bold titles using heading tags (<h1> to <h6>). Now, what about the main body text of your website? How do you write sentences, paragraphs, postal addresses, or poems?

In this lesson, we will explore:

1. 1
   The Paragraph Tag (<p>) — for standard body text.
2. 2
   The Line Break Tag (<br>) — for jumping to the next line.
3. 3
   The Horizontal Rule Tag (<hr>) — for drawing neat divider lines.
4. 4
   The Preformatted Tag (<pre>) — for preserving spaces and poem stanzas.

1. The Paragraph Tag (<p>)

The <p> tag is used to write paragraphs of text on a webpage.

Whenever you wrap text inside <p>...</p>, the web browser does two automatic things:

1. 1
   It always starts the paragraph on a fresh new line.
2. 2
   It automatically adds a comfortable blank space (margin) above and below the paragraph, so sentences never look squished together.

Example:

In your browser, these two sentences will appear as two distinct paragraphs with a neat gap separating them.

2. The Line Break Tag (<br>)

What if you want to move to the next line without starting a whole new paragraph or adding a large blank gap?

In HTML, pressing Enter on your keyboard does NOT create a new line in your browser. To force the text to jump to the very next line, we use the <br> (Break) tag!

Real-Life Use Case 1: Writing a Postal Address 📬

When you write a school or home address, you want each part on a new line, but without big paragraph gaps:

Real-Life Use Case 2: Writing a Poem 📜

Poems need each rhyming line to appear directly below the previous one:

3. The Horizontal Divider Tag (<hr>)

<hr> stands for Horizontal Rule. It draws a light, straight horizontal line across the width of the webpage.

It is used as a visual divider when you are changing topics or moving from one section to another:

Like <br>, <hr> is also an empty (void) tag and does not require a closing tag.

4. The Big Secret: HTML Whitespace Collapsing! 🤫

Many beginner students make this mistake when they start writing HTML:

They type this in their code:

And they expect the browser to show all those spaces and newlines!

Lekin jab woh browser mein dekhte hain, the browser displays:

Why does this happen?

This behavior is called Whitespace Collapsing.

Web browsers automatically compress multiple consecutive spaces, tabs, and keyboard Enters into just ONE single space.

Whether you press the spacebar 2 times or 50 times, HTML will only display one single space on the screen!

Why does HTML do this?

Because it allows developers to indent and format their code neatly with spaces and tabs without accidentally stretching out words on the live webpage.

5. The <pre> Tag (Preformatted Text)

What if you really want the browser to preserve your exact spaces, tabs, and line breaks?

That is where the <pre> (Preformatted Text) tag comes to the rescue!

Whatever you write inside <pre>...</pre> will be displayed exactly as you typed it in a clean monospace font (like a typewriter):

Perfect for ASCII Art:

Comparison Table: <p>, <br>, <hr>, <pre>

Common Beginner Mistakes to Avoid

1. 1
   ⚠️ Pressing Enter in Code Instead of Using <br>:

• Pressing Enter in your code editor does not create a new line in the browser. Always use <br> when you want a line break.

1. 1
   ⚠️ Writing Closing Tags for <br> or <hr>:

• Wrong: <br></br> or <hr></hr>
• Correct: Just write <br> and <hr>.

1. 1
   ⚠️ Nesting <p> Inside Another <p>:

• Wrong: <p>Outer paragraph <p>Inner paragraph</p></p>
• Browsers automatically close the first paragraph when they encounter a second <p>. Always write paragraphs one after another.

Quick Summary

• Use <p> for regular paragraphs of body text.
• Browsers automatically add spacing above and below <p> tags.
• Use <br> to break a line (perfect for poems and addresses).
• Use <hr> to draw a horizontal dividing line between topics.
• Both <br> and <hr> are empty tags and do not need closing tags.
• Whitespace Collapsing: HTML automatically turns multiple spaces and enters into a single space.
• Use <pre> if you need to preserve exact spaces, tabs, and indentation.

Practice Quiz

Test your understanding with these multiple-choice questions:

1. Which HTML tag is used to create a line break within a paragraph?

A. <break> B. <lb> C. <br> D. <newline> Answer: C Explanation: The <br> (break) element inserts a single line break without creating a new paragraph.

2. What happens when you type 10 spaces between two words inside a <p> tag?

A. The browser displays all 10 spaces B. The browser produces an error C. The browser collapses them into a single space D. The second word disappears Answer: C Explanation: HTML applies whitespace collapsing, compressing multiple spaces, tabs, and line returns into a single space.

3. Which tag should you use if you want to preserve exact spaces and line breaks as typed?

A. <p> B. <pre> C. <text> D. <format> Answer: B Explanation: The <pre> (preformatted) tag displays text in a fixed-width font while preserving all spaces and line breaks.

4. What does the <hr> tag do when added to a webpage?

A. Adds a headline B. Draws a thematic horizontal divider line across the page C. Highlights the text in red D. Plays a sound Answer: B Explanation: <hr> stands for horizontal rule. It visually separates content with a horizontal dividing line.

5. Why should you NOT use empty <p></p> tags just to create vertical spacing between items?

A. It causes screen readers to announce empty paragraphs and clutters the HTML structure; use CSS margins instead B. Browsers crash when encountering empty paragraphs C. Empty paragraphs turn red D. Empty paragraphs are illegal Answer: A Explanation: Using empty <p> tags for layout spacing hurts accessibility and violates separation of content and styling. Use CSS margin/padding instead.

Practice Challenge (Try It Yourself)

1. 1
   Open your index.html in VS Code.
2. 2
   Inside <body>, create:

• An <h1> heading: My School & Favorite Poem.
• A <p> paragraph with your school name and postal address separated cleanly using <br>.
• An <hr> divider line.
• A short 4-line poem written using either <p> with <br> tags, or using <pre>.

1. 1
   Save the file (Ctrl + S) and view it live in your browser to verify the spacing! 🚀