HTML Headings0%

HTML Headings

Beginner8 min read•Updated: 2026-09-30

HTML Headings (`<h1>` to `<h6>`)

Welcome to Chapter 2: Heading & Paragraphs! 📰

Imagine picking up a morning newspaper like The Times of India or opening your Science textbook. What is the very first thing your eyes notice?

The Big Bold Headline at the top of the page!
Then the smaller section titles.
And finally, the detailed story paragraphs.

In HTML, we use Heading Tags to create clear titles and subtitles. Headings organize your webpage into neat sections so that readers and search engines (like Google) can understand what your page is about within seconds.

The Six Heading Levels in HTML

HTML gives us 6 levels of headings, ranging from <h1> down to <h6>:

1<h1>Heading 1 - Most Important Title</h1>
2<h2>Heading 2 - Major Section Title</h2>
3<h3>Heading 3 - Sub-section Heading</h3>
4<h4>Heading 4 - Minor Heading</h4>
5<h5>Heading 5 - Small Sub-heading</h5>
6<h6>Heading 6 - Least Important Heading</h6>

What Happens in the Browser?

<h1> produces the largest and boldest text on the page.
As the number increases from 1 to 6, the text size becomes progressively smaller.
<h6> produces the smallest heading.

Real-Life Analogy: School Hierarchy

To easily remember when to use which heading, think of your School Administration:

1🏛️ THE SCHOOL HIERARCHY ANALOGY:
2 
3<h1>  Principal               (The one and only chief of the school)
4 ├── <h2>  Head of Department (Science, Commerce, Arts)
5 │    ├── <h3>  Class Teacher (Class 10A, Class 10B)
6 │    │    └── <h4>  Subject Topics (Physics, Chemistry)

In the exact same way on a webpage:

<h1> is the Main Title of the entire page.
<h2> defines the Main Sections.
<h3> defines Subsections inside an <h2>.
<h4> to <h6> are used for smaller sub-topics if needed.

Comparison Table: Heading Levels & Usage

Tag	Importance	Relative Size	Practical Example
`<h1>`	Top Priority (Highest)	Largest	Main title of your article or website page
`<h2>`	High	Large	Chapter title or major topic heading
`<h3>`	Medium	Medium-large	Sub-topic under a chapter
`<h4>`	Normal	Medium	Minor points or sidebar titles
`<h5>`	Low	Small	Footer widget titles or fine print headings
`<h6>`	Lowest Priority	Smallest	Rarely used; smallest sub-notes

Complete Code Example

Here is how headings and paragraphs work together to create a structured school article:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>Solar System Guide</title>
6</head>
7<body>
8 
9  <!-- Main Title: Only ONE per page -->
10  <h1>The Solar System and Our Universe</h1>
11 
12  <!-- Section 1 -->
13  <h2>The Inner Rocky Planets</h2>
14  <h3>Planet Mercury</h3>
15  <p>Mercury is the closest planet to the Sun and the smallest planet in our solar system.</p>
16 
17  <h3>Planet Venus</h3>
18  <p>Venus is the hottest planet in our solar system because of its thick atmosphere.</p>
19 
20  <!-- Section 2 -->
21  <h2>The Outer Gas Giants</h2>
22  <h3>Planet Jupiter</h3>
23  <p>Jupiter is the largest planet in our solar system, famous for its Great Red Spot.</p>
24 
25</body>
26</html>

Notice how clean, organized, and easy to read this structure is! Anyone reading this page can instantly understand the hierarchy.

4 Golden Rules for Using Headings (Best Practices)

To write clean, professional code that ranks high on Google, always follow these four rules:

1. Use Only ONE `<h1>` Per Webpage ⚠️

Every webpage should have only one <h1> tag representing the primary topic of the document.
Think of <h1> like the title printed on the cover of a notebook. A notebook only has one main title on the cover!
Using 5 or 6 different <h1> tags on one page confuses Google and hurts your SEO ranking.

2. Never Skip Heading Levels

Always follow a natural step-by-step staircase:
Correct: <h1> ➔ <h2> ➔ <h3>
Wrong: <h1> ➔ <h4> (Do not jump directly from h1 to h4!)
Maintain a proper outline hierarchy.

3. Do NOT Use Headings Just for Big or Bold Text

Many beginners use <h1> simply because they want some random sentence to look big.
Never do this! Headings are meant for structure and titles, not for styling.
If you just want big text, use a paragraph <p> and make it big with CSS styling or use <b> for bold text.

4. Keep Headings Short and Clear

A heading should be a punchy title (usually 3 to 8 words). Never put full paragraphs of text inside an <h1> or <h2> tag!

Common Beginner Mistakes to Avoid

1
⚠️ Forgetting to Close a Heading Tag:

 <!-- WRONG: All text below will accidentally turn into a huge heading! -->
 <h1>My Daily Routine
 <p>I wake up at 6 AM.</p>
4 
 <!-- CORRECT -->
 <h1>My Daily Routine</h1>
 <p>I wake up at 6 AM.</p>

1
⚠️ Using <h7>, <h8>, or <h0>:

HTML only supports headings from <h1> to <h6>. There is no <h7> or <h0>.

1
⚠️ Putting Links Around Whole Headings Incorrectly:

1   <!-- CORRECT: Put the link inside the heading -->
2   <h2><a href="https://example.com">Read More News</a></h2>

Quick Summary

HTML provides 6 heading levels: <h1> (highest) down to <h6> (lowest).
Headings give structure and an outline to your webpage.
Always use exactly one <h1> per page for the main title.
Never skip heading levels (e.g., do not jump from <h1> directly to <h3>).
Use headings for titles and structure, not just to make text look big.
Always close your heading tags (</h1>, </h2>).

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

Which HTML heading tag represents the highest level of importance?

Question 2

How many <h1> tags should you ideally use on a single webpage?

Question 3

What is wrong with the following code snippet?

HTMLCode Snippet

<h1>Welcome to My Blog</h1>

<h4>Latest News</h4>

Question 4

Why should you NOT use heading tags like <h1> or <h2> just to make text bold or big?

Question 5

What is the smallest, least important standard HTML heading level?

Practice Challenge (Try It Yourself)

1
Open VS Code and open your index.html file.
2
Clear the contents inside <body> and create a structured page about Your Favorite Sport:

Add an <h1> with the sport's name (e.g., Cricket: India's Favorite Sport).
Add an <h2> for Basic Rules.
Add two <h3> tags under it for Batting Rules and Bowling Rules with short paragraph explanations.
Add another <h2> for Famous Players.

1
Save your file (Ctrl + S) and check how neatly your browser displays the hierarchy! 🎯

🚀 What's Next?

In the next lesson, we will continue your web development journey with Paragraphs & Line Breaks (Heading & Paragraphs).

👉 Continue to Next Lesson: Paragraphs & Line Breaks →

Next Lesson

Paragraphs & Line Breaks

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Attributes	Paragraphs & Line Breaks

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

Paragraphs & Line Breaks

HTML Headings

Beginner8 min read•Updated: 2026-09-30

Study Materials Cheatsheet

HTML Headings (`<h1>` to `<h6>`)

Welcome to Chapter 2: Heading & Paragraphs! 📰

Imagine picking up a morning newspaper like The Times of India or opening your Science textbook. What is the very first thing your eyes notice?

The Big Bold Headline at the top of the page!
Then the smaller section titles.
And finally, the detailed story paragraphs.

The Six Heading Levels in HTML

HTML gives us 6 levels of headings, ranging from <h1> down to <h6>:

1<h1>Heading 1 - Most Important Title</h1>
2<h2>Heading 2 - Major Section Title</h2>
3<h3>Heading 3 - Sub-section Heading</h3>
4<h4>Heading 4 - Minor Heading</h4>
5<h5>Heading 5 - Small Sub-heading</h5>
6<h6>Heading 6 - Least Important Heading</h6>

What Happens in the Browser?

<h1> produces the largest and boldest text on the page.
As the number increases from 1 to 6, the text size becomes progressively smaller.
<h6> produces the smallest heading.

Real-Life Analogy: School Hierarchy

To easily remember when to use which heading, think of your School Administration:

1🏛️ THE SCHOOL HIERARCHY ANALOGY:
2 
3<h1>  Principal               (The one and only chief of the school)
4 ├── <h2>  Head of Department (Science, Commerce, Arts)
5 │    ├── <h3>  Class Teacher (Class 10A, Class 10B)
6 │    │    └── <h4>  Subject Topics (Physics, Chemistry)

In the exact same way on a webpage:

<h1> is the Main Title of the entire page.
<h2> defines the Main Sections.
<h3> defines Subsections inside an <h2>.
<h4> to <h6> are used for smaller sub-topics if needed.

Comparison Table: Heading Levels & Usage

Tag	Importance	Relative Size	Practical Example
`<h1>`	Top Priority (Highest)	Largest	Main title of your article or website page
`<h2>`	High	Large	Chapter title or major topic heading
`<h3>`	Medium	Medium-large	Sub-topic under a chapter
`<h4>`	Normal	Medium	Minor points or sidebar titles
`<h5>`	Low	Small	Footer widget titles or fine print headings
`<h6>`	Lowest Priority	Smallest	Rarely used; smallest sub-notes

Complete Code Example

Here is how headings and paragraphs work together to create a structured school article:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>Solar System Guide</title>
6</head>
7<body>
8 
9  <!-- Main Title: Only ONE per page -->
10  <h1>The Solar System and Our Universe</h1>
11 
12  <!-- Section 1 -->
13  <h2>The Inner Rocky Planets</h2>
14  <h3>Planet Mercury</h3>
15  <p>Mercury is the closest planet to the Sun and the smallest planet in our solar system.</p>
16 
17  <h3>Planet Venus</h3>
18  <p>Venus is the hottest planet in our solar system because of its thick atmosphere.</p>
19 
20  <!-- Section 2 -->
21  <h2>The Outer Gas Giants</h2>
22  <h3>Planet Jupiter</h3>
23  <p>Jupiter is the largest planet in our solar system, famous for its Great Red Spot.</p>
24 
25</body>
26</html>

Notice how clean, organized, and easy to read this structure is! Anyone reading this page can instantly understand the hierarchy.

4 Golden Rules for Using Headings (Best Practices)

To write clean, professional code that ranks high on Google, always follow these four rules:

1. Use Only ONE `<h1>` Per Webpage ⚠️

Every webpage should have only one <h1> tag representing the primary topic of the document.
Think of <h1> like the title printed on the cover of a notebook. A notebook only has one main title on the cover!
Using 5 or 6 different <h1> tags on one page confuses Google and hurts your SEO ranking.

2. Never Skip Heading Levels

Always follow a natural step-by-step staircase:
Correct: <h1> ➔ <h2> ➔ <h3>
Wrong: <h1> ➔ <h4> (Do not jump directly from h1 to h4!)
Maintain a proper outline hierarchy.

3. Do NOT Use Headings Just for Big or Bold Text

Many beginners use <h1> simply because they want some random sentence to look big.
Never do this! Headings are meant for structure and titles, not for styling.
If you just want big text, use a paragraph <p> and make it big with CSS styling or use <b> for bold text.

4. Keep Headings Short and Clear

A heading should be a punchy title (usually 3 to 8 words). Never put full paragraphs of text inside an <h1> or <h2> tag!

Common Beginner Mistakes to Avoid

1
⚠️ Forgetting to Close a Heading Tag:

 <!-- WRONG: All text below will accidentally turn into a huge heading! -->
 <h1>My Daily Routine
 <p>I wake up at 6 AM.</p>
4 
 <!-- CORRECT -->
 <h1>My Daily Routine</h1>
 <p>I wake up at 6 AM.</p>

1
⚠️ Using <h7>, <h8>, or <h0>:

HTML only supports headings from <h1> to <h6>. There is no <h7> or <h0>.

1
⚠️ Putting Links Around Whole Headings Incorrectly:

1   <!-- CORRECT: Put the link inside the heading -->
2   <h2><a href="https://example.com">Read More News</a></h2>

Quick Summary

HTML provides 6 heading levels: <h1> (highest) down to <h6> (lowest).
Headings give structure and an outline to your webpage.
Always use exactly one <h1> per page for the main title.
Never skip heading levels (e.g., do not jump from <h1> directly to <h3>).
Use headings for titles and structure, not just to make text look big.
Always close your heading tags (</h1>, </h2>).

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

Which HTML heading tag represents the highest level of importance?

Question 2

How many <h1> tags should you ideally use on a single webpage?

Question 3

What is wrong with the following code snippet?

HTMLCode Snippet

<h1>Welcome to My Blog</h1>

<h4>Latest News</h4>

Question 4

Why should you NOT use heading tags like <h1> or <h2> just to make text bold or big?

Question 5

What is the smallest, least important standard HTML heading level?

Practice Challenge (Try It Yourself)

1
Open VS Code and open your index.html file.
2
Clear the contents inside <body> and create a structured page about Your Favorite Sport:

Add an <h1> with the sport's name (e.g., Cricket: India's Favorite Sport).
Add an <h2> for Basic Rules.
Add two <h3> tags under it for Batting Rules and Bowling Rules with short paragraph explanations.
Add another <h2> for Famous Players.

1
Save your file (Ctrl + S) and check how neatly your browser displays the hierarchy! 🎯

🚀 What's Next?

In the next lesson, we will continue your web development journey with Paragraphs & Line Breaks (Heading & Paragraphs).

👉 Continue to Next Lesson: Paragraphs & Line Breaks →

Next Lesson

Paragraphs & Line Breaks

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Attributes	Paragraphs & Line Breaks

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

HTML Headings (<h1> to <h6>)

The Six Heading Levels in HTML

What Happens in the Browser?

Real-Life Analogy: School Hierarchy

Comparison Table: Heading Levels & Usage

Complete Code Example

4 Golden Rules for Using Headings (Best Practices)

1. Use Only ONE <h1> Per Webpage ⚠️

2. Never Skip Heading Levels

3. Do NOT Use Headings Just for Big or Bold Text

4. Keep Headings Short and Clear

Common Beginner Mistakes to Avoid

Quick Summary

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Paragraphs & Line Breaks

Related Lessons

Practice Quiz

Loading Page Content...

HTML Headings (<h1> to <h6>)

The Six Heading Levels in HTML

What Happens in the Browser?

Real-Life Analogy: School Hierarchy

Comparison Table: Heading Levels & Usage

Complete Code Example

4 Golden Rules for Using Headings (Best Practices)

1. Use Only ONE <h1> Per Webpage ⚠️

2. Never Skip Heading Levels

3. Do NOT Use Headings Just for Big or Bold Text

4. Keep Headings Short and Clear

Common Beginner Mistakes to Avoid

Quick Summary

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Paragraphs & Line Breaks

Related Lessons

Practice Quiz

HTML Headings (`<h1>` to `<h6>`)

1. Use Only ONE `<h1>` Per Webpage ⚠️

HTML Headings (`<h1>` to `<h6>`)

1. Use Only ONE `<h1>` Per Webpage ⚠️