HTML Headings

HTML Tutorial: HTML Headings

h1 to h6 explained + colorful examples + clear input & output results

---

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

There are 6 heading levels:

• <h1> (largest & most important)
• <h2>
• <h3>
• <h4>
• <h5>
• <h6> (smallest)

---

1️⃣ Basic Heading Example

INPUT (Colored Code):

<h1>
Main Title
</h1>

<h2>
Sub Title
</h2>

<h3>
Section Title
</h3>

OUTPUT (Browser Result):

Main Title

Sub Title

Section Title

✔️ <h1> is biggest ✔️ <h6> is smallest ✔️ Size decreases from h1 → h6

---

2️⃣ All Heading Levels Example

INPUT:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

OUTPUT:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

---

3️⃣ Headings with Style Attribute

INPUT:

<h1 
style="color:blue;"
>
Blue Title
</h1>

<h2 
style="color:red;"
>
Red Subtitle
</h2>

OUTPUT:

Blue Title

Red Subtitle

✔️ You can change color ✔️ You can change size using CSS ✔️ Style makes headings more attractive

---

4️⃣ Why Headings Are Important (SEO)

Search engines use headings to understand page structure.

• Use only one h1 per page
• Use h2 for main sections
• Use h3 for sub-sections

Correct heading structure improves:

• SEO ranking
• Readability
• User experience

---

🎯 Best Practice Example

INPUT:

<h1>HTML Course</h1>

<h2>Introduction</h2>

<h3>What is HTML?</h3>

OUTPUT:

HTML Course

Introduction

What is HTML?

---

🚀 What’s Next?

Next lesson:

👉 HTML Paragraphs

You will learn:

• How paragraphs work
• Line breaks
• Horizontal rules
• Text spacing

---

Headings organize your content. Use them wisely.