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.
Headings: Structure, Not Font Size
<h1>-<h6> define a document's outline — the hierarchy of its sections. The biggest mistake is choosing a heading level for how big it looks. Level is about meaning; size is a CSS job.
<h1>Page title (one per page)</h1>
<h2>Major section</h2>
<h3>Subsection</h3>
<h2>Another major section</h2>
<!-- ❌ don't jump h2 → h4; ❌ don't pick h3 "because it's smaller" -->| Rule | Why |
|---|---|
One <h1> per page | the page's main topic |
| Don't skip levels | h2 → h4 breaks the outline |
| Size via CSS | need a small heading? style it, don't demote it |
Why the outline matters: screen-reader users navigate by jumping heading to heading — a broken or skipped hierarchy makes the page confusing to move through. Search engines also read headings to understand your content's structure and weight the <h1> heavily. Think of headings like a document's table of contents: pick the level that reflects the section's depth, then use CSS font-size to make it look however you want.
🏋️ Practical Exercise
- Create a page with a single
<h1>for the page title. - Add two
<h2>sub-sections under it. - Nest an
<h3>under one of the<h2>sections. - Deliberately skip from
<h2>to<h4>, view the page, then fix it to use<h3>. - Use the DevTools accessibility panel to inspect your heading outline.
🔥 Challenge Exercise
Build the outline for a blog article: one <h1> (article title), three <h2> sections (Intro, Body, Conclusion), and two <h3> subsections under Body. Do not use any heading purely to make text bigger — confirm the structure reads logically top to bottom like a table of contents.
📋 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.
Interview Questions
- How many heading levels does HTML provide?
- Why should a page have only one
<h1>? - What happens to SEO and accessibility if you skip heading levels?
- Should you choose a heading based on its visual size? Why or why not?
- How do screen readers use headings to navigate a page?
Related Topics
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.