📘 DAY 9: HTML FORMATTING TAGS 

---

1️⃣ What are HTML Formatting Tags?

HTML Formatting Tags are used to:

• Format text

• Highlight important content

• Improve readability

• Add meaning (semantic value)

They change how text looks and sometimes what it means.

---

2️⃣ Basic Formatting Tags Overview

Tag	Purpose
<b>	Bold text
<i>	Italic text
<u>	Underline text
<strong>	Important text
<em>	Emphasized text
<mark>	Highlight text
<small>	Smaller text
<del>	Deleted text
<ins>	Inserted text
<sub>	Subscript
<sup>	Superscript

---

3️⃣ <b> – Bold Text

Displays text in bold, but has no semantic importance.

<p>This is <b>bold</b> text</p>

👉 Use only for visual styling.

---

4️⃣ <strong> – Important Text

Displays text in bold, but also indicates importance.

<p>This is <strong>important</strong> text</p>

✔ Better for SEO & accessibility

---

5️⃣ <i> – Italic Text

Displays text in italic, no extra meaning.

<p>This is <i>italic</i> text</p>

---

6️⃣ <em> – Emphasized Text

Displays text in italic with emphasis meaning.

<p>This is <em>emphasized</em> text</p>

✔ Screen readers stress this text
✔ Preferred over <i>

---

7️⃣ <u> – Underline Text

Underlines the text.

<p>This is <u>underlined</u> text</p>

⚠️ Avoid excessive use (can look like links).

---

8️⃣ <mark> – Highlight Text

Highlights text with background color.

<p>This is <mark>highlighted</mark> text</p>

✔ Useful for notes & keywords

---

9️⃣ <small> – Smaller Text

Displays text in smaller font size.

<p>This is <small>small</small> text</p>

---

🔟 <del> – Deleted Text

Shows deleted content with strike-through.

<p>Price: <del>₹1000</del> ₹800</p>

---

1️⃣1️⃣ <ins> – Inserted Text

Shows inserted content (usually underlined).

<p><ins>New content added</ins></p>

---

1️⃣2️⃣ <sub> – Subscript Text

Used for chemical formulas.

<p>H<sub>2</sub>O</p>

---

1️⃣3️⃣ <sup> – Superscript Text

Used for math expressions.

<p>a<sup>2</sup> + b<sup>2</sup></p>

---

1️⃣4️⃣ Difference: <b> vs <strong>

<b>	<strong>
Visual only	Semantic meaning
No importance	Important content
Not SEO-friendly	SEO-friendly

---

1️⃣5️⃣ Difference: <i> vs <em>

<i>	<em>
Visual only	Emphasis
No meaning	Semantic
Avoid for content	Recommended

---

1️⃣6️⃣ Combining Formatting Tags

<p>
This is <strong><em>very important</em></strong> text
</p>

👉 Tags can be nested properly

---

1️⃣7️⃣ Common Beginner Mistakes

❌ Overusing <b> and <i>
❌ Ignoring semantic tags
❌ Incorrect nesting
❌ Using formatting instead of CSS

---

1️⃣8️⃣ Practice Examples

Example 1:

<p>
<mark>HTML</mark> is <strong>easy</strong> to learn.
</p>

Example 2:

<p>
Formula: a<sup>2</sup> + b<sup>2</sup>
</p>

---

1️⃣9️⃣ Interview / Viva Questions

1. Difference between <b> and <strong>?

2. Difference between <i> and <em>?

3. What is <mark> tag?

4. Where is <sub> used?

5. Are formatting tags semantic?

---

2️⃣0️⃣ Summary

• Formatting tags change text appearance

• Semantic tags give meaning

• Prefer <strong> & <em>

• Avoid misuse of formatting

• Use CSS for styling in real projects

---