The Six Heading Levels
<h1>Page Title — Most Important (one per page)</h1>
<h2>Major Section</h2>
<h3>Sub-section</h3>
<h4>Sub-sub-section</h4>
<h5>Rarely used — deep hierarchy</h5>
<h6>Almost never used</h6>Headings and SEO
Search engines read your heading hierarchy to understand what a page is about and how it is structured. Key rules:
- One
<h1>per page — it is the page's primary topic. Search engines treat it as the most important signal. - Include target keywords in headings — especially
<h1>and<h2>. - Don't skip levels — going from
<h2>to<h4>signals poor structure to both crawlers and users.
Headings and Accessibility
Screen reader users can navigate a page by jumping between headings — like a table of contents. This is often the primary way blind users scan long pages for relevant content. A proper heading hierarchy (h1 → h2 → h3) creates an accessible document outline.
Real-World Heading Structure
<h1>The Complete Guide to CSS Flexbox</h1>
<h2>What is Flexbox?</h2>
<h3>Flex Container vs Flex Items</h3>
<h3>Main Axis and Cross Axis</h3>
<h2>Flex Container Properties</h2>
<h3>flex-direction</h3>
<h3>justify-content</h3>
<h3>align-items</h3>
<h2>Flex Item Properties</h2>
<h3>flex-grow and flex-shrink</h3>
<h3>align-self</h3>
<h2>Practical Examples</h2>Common Heading Mistakes
| Mistake | Problem | Fix |
|---|---|---|
Multiple <h1> tags | Confuses search engines about page topic | One <h1> only |
| Using headings for big text | Pollutes document outline | Use CSS font-size for visual size |
| Skipping levels (h2 → h4) | Broken accessible outline | Follow strict hierarchy |
| Empty headings | Accessibility failure | Always put meaningful text in headings |
If you want large text for decorative or design purposes, use CSS font-size on a <p> or <span>. Misusing headings pollutes the page's semantic structure — screen readers will announce the text as a heading when it is not one.
📋 Summary
- HTML has 6 heading levels:
<h1>(most important) to<h6>(least important). - Use exactly one
<h1>per page — the main topic. - Follow a logical hierarchy — don't skip levels.
- Headings affect SEO rankings and screen reader navigation.
- Never use headings just for visual size — use CSS for that.
FAQ
On the homepage, yes — many sites make their brand name the h1. On interior pages (blog posts, product pages), the h1 should be the page's topic, not the brand. Search engines look at the h1 to understand what the specific page is about.
Browsers apply default styles — h1 is biggest, h6 is smallest. You can override all of this with CSS. But the HTML semantic order (h1 → h2 → h3) should reflect document structure regardless of visual appearance.