📘 DAY 7: HTML PARAGRAPHS

1️⃣ What is an HTML Paragraph?

An HTML paragraph is used to display blocks of text on a webpage.

Paragraphs are defined using the <p> tag.

Syntax:

• <p>This is a paragraph</p>

2️⃣ Basic Example of HTML Paragraph

• <p>This is my first paragraph.</p>

• <p>This is my second paragraph.</p>

👉 Each paragraph starts on a new line.

3️⃣ Browser Behavior with Paragraphs

• Browser automatically adds space before and after paragraphs

• Extra spaces in code are ignored

Example:

• <p>This      text      has spaces</p>

Output:

• This text has spaces

---

4️⃣ HTML Line Break Tag <br>

The <br> tag is used to insert a line break.

Example:

• <p>Hello<br>World</p>

Output:

• Hello

• World

👉 <br> is an empty (unpaired) tag

---

5️⃣ Horizontal Rule <hr>

The <hr> tag is used to draw a horizontal line.

Example:

• <p>Section 1</p>

• <hr>

• <p>Section 2</p>

👉 Used to separate content sections

---

6️⃣ The <pre> Tag (Preformatted Text)

The <pre> tag preserves:

• Spaces

• Line breaks

• Formatting

Example:

• <pre>

• Hello   World

• This   is HTML

• </pre>

Output:

• Hello   World

• This   is HTML

---

7️⃣ Paragraph Alignment (Using Style Attribute)

• <p style="text-align:center;">Center Paragraph</p>

• <p style="text-align:right;">Right Paragraph</p>

---

8️⃣ HTML Paragraph with Inline Formatting

• <p>

• This is <b>bold</b>,

• <i>italic</i>,

• and <u>underlined</u> text.

• </p>

---

9️⃣ Difference Between <p> and <br>

<p>	<br>
Creates paragraph	Breaks line
Adds margin	No margin
Block-level	Inline

---

🔟 Paragraphs and Whitespace

HTML removes:

• Extra spaces

• Extra lines

Example:

• <p>

• Hello

• 
  
• 
  

• World

• </p>

Output:

• Hello World

👉 Use <br> or <pre> if spacing is needed.

---

1️⃣1️⃣ Common Beginner Mistakes

❌ Using <br> instead of <p>
❌ Writing long text without paragraphs
❌ Expecting spaces to work normally
❌ Using <p> inside <p>

---

1️⃣2️⃣ Practice Examples

Example 1:

• <p>This is paragraph one.</p>

• <hr>

• <p>This is paragraph two.</p>

Example 2:

• <p>

• Name: Sunny<br>

• Course: HTML<br>

• City: Hyderabad

• </p>

---

1️⃣3️⃣ Interview / Viva Questions

1. What is <p> tag?

2. Difference between <p> and <br>?

3. What is <hr> tag?

4. What is <pre> tag?

5. Why does HTML ignore extra spaces?

---

1️⃣4️⃣ Summary

• <p> defines paragraphs

• <br> breaks line

• <hr> separates content

• <pre> preserves formatting

• HTML ignores extra spaces

•