Introduction
Headings are one of the first building blocks you use when structuring a webpage.
They are crucial for organizing content, guiding users, and helping search engines understand your page's hierarchy.
But using headings properly isn’t just about making text bigger or bolder — it's about semantic structure, accessibility, and SEO (Search Engine Optimization).
In this guide, we’ll explore everything you need to know about HTML headings: from h1 to h6, including best practices, real-world examples, and common mistakes.
1. What Are Headings in HTML?
Definition:
Headings in HTML are special tags (<h1> to <h6>) used to define the titles or subtitles of a page section.
Each heading level represents a different level of importance, with <h1> being the highest and <h6> the lowest.
Syntax Example:
<h1>Main Title</h1>
<h2>Subsection Title</h2>
<h3>Smaller Subsection</h3>
2. Purpose of Headings
- Visual Structure: Break up large blocks of text, making pages easier to scan.
- Semantic Meaning: Give meaning to the page content hierarchy.
- Accessibility: Assist screen readers and assistive technologies to navigate content quickly.
- SEO Benefits: Search engines prioritize content structure when ranking pages.
3. Understanding the Hierarchy: h1 to h6
| Heading Tag | Typical Use Case | Importance Level |
|---|---|---|
<h1> |
Main page title | Highest |
<h2> |
Main section heading | High |
<h3> |
Subsection under an <h2>
|
Medium |
<h4> |
Subsection under an <h3>
|
Low |
<h5> |
Minor subsections, rarely used | Lower |
<h6> |
Least important section headings | Lowest |