HTML Headings Explained: h1 to h6 with Examples for Beginners
HTML headings are used to define titles and subtitles on a webpage.
They help:
Organize content
Improve readability
Improve SEO
Structure web pages properly
There are six heading levels in HTML:
In this beginner-friendly guide, you will learn:
What HTML headings are
Differences between h1 to h6
Syntax and examples
SEO best practices
Common mistakes
Real-world usage
Let’s begin step by step.
What Are HTML Headings?
HTML headings are tags used to define headings on a webpage.
They range from:
<h1> (Largest)
<h2>
<h3>
<h4>
<h5>
<h6> (Smallest)Each heading level has a different importance.
Why Are Headings Important?
Readability – Breaks content into clear sections.
SEO (Search Engine Optimization) – Search engines use headings to understand page structure.
Accessibility – Screen readers rely on headings to help visually impaired users navigate content.
Content Hierarchy – Defines the importance of sections (H1 > H2 > H3 …).
Basic Syntax of HTML Headings
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
<h4>Sub Section</h4>
<h5>Small Heading</h5>
<h6>Smallest Heading</h6>Example: All Heading Tags
<!DOCTYPE html>
<html>
<body>
<h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>
<h4>This is H4</h4>
<h5>This is H5</h5>
<h6>This is H6</h6>
</body>
</html>When you open this in a browser, you will see the size difference.
Understanding Each Heading Level
<h1> – Main Heading
Most important heading
Usually used for page title
Only one per page (recommended)
Example:
<h2> – Subheading
Used for major sections
Comes after h1
Example:
<h3> – Section Heading
Used inside h2 sections
Example:
<h4>, <h5>, <h6> – Smaller Headings
Used for deeper sections
Less common in simple websites
Example:
<h4>Version Updates</h4>
<h5>HTML5 Features</h5>
<h6>Minor Details</h6>Heading Structure Example (Proper Hierarchy)
<h1>Complete HTML Course</h1>
<h2>Introduction</h2>
<h3>What is HTML?</h3>
<h2>HTML Basics</h2>
<h3>HTML Elements</h3>
<h3>HTML Attributes</h3>
<h2>Advanced Topics</h2>
<h3>Semantic HTML</h3>Importance of Heading Hierarchy
Headings should follow order:
Correct order:
Wrong example:
Skipping levels confuses search engines and screen readers.
HTML Headings vs Paragraph Tag
| Feature | Headings | Paragraph |
|---|---|---|
| Purpose | Titles & sections | Normal text |
| SEO value | High | Moderate |
| Font size | Large to small | Normal |
| Used for structure | ✅ Yes | ❌ No |
Headings define structure. Paragraphs define content.
SEO Best Practices for HTML Headings
Headings are very important for SEO.
Follow these best practices:
Use Only One <h1> Per Page
It should describe the main topic.
Include Focus Keyword in h1
Example:
Maintain Proper Hierarchy
Do not skip heading levels.
Keep Headings Clear and Descriptive
Avoid vague headings like:
“Section 1”
Use:
“HTML Heading Tags Explained”
Do Not Use Headings for Styling Only
Use CSS for styling, not heading tags.
Wrong:
Use CSS instead.
Real-World Use Cases
HTML headings are used in:
- Blog posts
- News articles
- Educational websites
- Product pages
- Portfolio websites
Common Mistakes Beginners Make
Using Multiple h1 Tags
Wrong:
<h1>Home</h1><h1>About</h1>
Use only one main h1.
Skipping Heading Levels
Wrong:
<h4>Sub</h4>
Using Headings for Styling
Headings are for structure, not design.
Making Headings Too Long
Keep them short and meaningful.
Styling HTML Headings with CSS
You can customize headings using CSS.
Example:
<style>
h1 {
color: blue;
font-size: 40px;
}
h2 {
color: green;
}
</style>This changes appearance without affecting structure.
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings Guide</title>
</head>
<body>
<h1>HTML Headings Explained</h1>
<h2>What Are Headings?</h2>
<p>Headings define titles and structure.</p>
<h2>Types of Headings</h2>
<h3>Primary Heading</h3>
<h3>Secondary Heading</h3>
<h2>Conclusion</h2>
<p>Use headings properly for SEO and structure.</p>
</body>
</html>FAQs
Q1. Can I use multiple <h1> tags on one page?
Technically yes, but best practice is to have only one
<h1>for clarity and SEO.
Q2. What is the difference between headings and paragraphs?
Headings (
<h1>–<h6>) are for titles, while<p>is for normal text content.
Q3. Do headings affect SEO ranking?
Yes. Properly structured headings help search engines understand your content better.
Q4. Can I style headings with CSS?
Absolutely. You can change font, size, and color using CSS. Example:
Q5. What happens if I skip heading levels?
Browsers won’t break, but skipping levels (e.g., from
<h1>to<h4>) makes your page less structured and may confuse users and search engines.
