HTML Paragraphs and Line Breaks

Writing content on a webpage? You’ll need to structure it properly using paragraphs and line breaks. These tags help you present readable and well-organized text.

Let’s break it down 👇

📄 The <p> Tag – Paragraph

The <p> tag is used to define a paragraph of text.

✅ Basic Syntax:

<p>This is a paragraph of text.</p>

🔍 Example:

<p>HTML is the standard language for creating webpages.</p>
<p>It uses tags to structure and format content.</p>

Each <p> starts on a new line and adds space before and after it by default (thanks to the browser’s default CSS).

🔁 Nesting Elements Inside <p>

You can place inline elements inside a paragraph.

Example:

<p>This is <strong>important</strong> text inside a paragraph.</p>

❌ Don’t place block elements (like <div>, <table>, <section>) inside a <p>. It’s invalid HTML.

🔄 The <br> Tag – Line Break

If you want to break a line without starting a new paragraph, use the <br> tag.

✅ Syntax:

Line 1<br>
Line 2<br>
Line 3

This is useful for:

• Addresses
• Poems
• Lyrics
• Formatted text where each line must be separate

🔍 Example:

<p>
  Name: John Doe<br>
  Email: john@example.com<br>
  Phone: +91-1234567890
</p>

❓ When to Use <p> vs <br>

⚠️ Best Practices

• Use <p> for paragraphs of related content
• Use <br> only when a line break is semantically correct (not just for spacing!)
• Avoid using multiple <br> tags for vertical spacing — use CSS instead

<!-- ❌ Don't do this -->
<p>Hello<br><br><br>World</p>

<!-- ✅ Instead use -->
<p>Hello</p>
<p>World</p>

🧪 Try This in Your HTML

<h2>Contact Info</h2>
<p>
  Jane Smith<br>
  123 HTML Street<br>
  Webville, CodeLand
</p>

<p>
  HTML lets you organize content into readable chunks. <br>
  You can even add <strong>bold</strong> or <em>italic</em> inside!
</p>

📝 Quick Recap

👉 Coming Up Next:

Let’s now learn how to add comments in HTML — useful for leaving notes or disabling code.

📚 Next: HTML Comments