📘 DAY 6: HTML HEADINGS 

---

1️⃣ What are HTML Headings?

HTML Headings are used to define titles and subtitles on a webpage.

HTML provides six heading levels:

<h1> to <h6>

• <h1> → Most important heading

• <h6> → Least important heading

---

2️⃣ List of HTML Heading Tags

Tag	Description
<h1>	Main heading
<h2>	Sub-heading
<h3>	Section heading
<h4>	Sub-section
<h5>	Smaller heading
<h6>	Smallest heading

---

3️⃣ Basic Example of Headings

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
<h4>Sub Section</h4>
<h5>Small Heading</h5>
<h6>Very Small Heading</h6>

---

4️⃣ Output of Headings

• <h1> appears largest

• Size decreases gradually till <h6>

👉 Browsers apply default styles to headings.

---

5️⃣ Importance of HTML Headings

Headings are important for:

• Page structure

• Readability

• SEO (Search Engine Optimization)

• Screen readers (Accessibility)

---

6️⃣ SEO Rules for Headings (VERY IMPORTANT)

✔ Use only one <h1> per page
✔ <h1> should contain main keyword
✔ Use <h2> for major sections
✔ Use <h3> for sub-sections

❌ Wrong SEO Practice

<h1>Title</h1>
<h1>Another Title</h1>

✅ Correct SEO Practice

<h1>Main Page Title</h1>
<h2>Section 1</h2>
<h2>Section 2</h2>

---

7️⃣ Headings vs Normal Text

Headings:

• Are bold by default

• Have margin (space)

• Carry semantic meaning

Normal text:

<p>This is paragraph text</p>

👉 Do not use headings just to make text big.

---

8️⃣ Styling Headings Using CSS

You can change heading appearance using CSS.

<h1 style="color:blue; font-size:30px;">
  Styled Heading
</h1>

👉 Structure comes from HTML
👉 Style comes from CSS

---

9️⃣ Headings and Accessibility

• Screen readers use headings to navigate

• Correct heading order improves accessibility

✔ Always follow proper order:

h1 → h2 → h3

---

🔟 Common Beginner Mistakes

❌ Skipping heading levels (h1 → h4)
❌ Using headings for styling only
❌ Multiple <h1> tags
❌ No headings on page

---

1️⃣1️⃣ Practice Example

<h1>HTML Tutorial</h1>

<h2>Introduction</h2>
<p>This is introduction</p>

<h2>Features</h2>
<h3>Easy to Learn</h3>
<p>HTML is simple</p>

---

1️⃣2️⃣ Interview / Viva Questions

1. What are HTML headings?

2. How many heading tags are there?

3. Which is the most important heading?

4. Can we use multiple <h1> tags?

5. Why are headings important for SEO?

---

1️⃣3️⃣ Summary

• HTML provides 6 heading tags

• <h1> is most important

• Headings define page structure

• Important for SEO & accessibility