HTML Reference
<h1>–<h6> — The Heading Elements
Six levels that define the structure of your content. The most important tags for SEO and accessibility.
Last updated: October 2026
Definition: HTML has six heading elements — <h1> through <h6>. They define the hierarchy of a page. <h1> is the highest level (usually the page title) and <h6> is the lowest (sub-sub-sub-section).
🎬 Live Example
All six heading levels, rendered with their default browser styles.
This is an h1 — Page title
This is an h2 — Major section
This is an h3 — Subsection
This is an h4 — Sub-subsection
This is an h5 — Minor detail
This is an h6 — Lowest level
💡 Notice how each level is progressively smaller. The hierarchy matters more than the size — you can style them to look any way you want.
Basic Syntax
<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Detail Heading</h4>
<h5>Minor Heading</h5>
<h6>Lowest Heading</h6>Each heading level is a distinct element. Use them in order.
⚙️ Global Attributes
Heading elements have no specific attributes. They use the standard global attributes:
| Attribute | Purpose |
|---|---|
id | Unique identifier — useful for anchor links. |
class | Class names for styling. |
style | Inline CSS. |
lang | Language of the heading text. |
dir | Text direction: ltr, rtl, auto. |
The Document Outline
The correct heading structure for a typical page:
<h1>Introduction to Python</h1>
<h2>What is Python?</h2>
<p>Python is a programming language...</p>
<h2>Installing Python</h2>
<h3>Windows Installation</h3>
<p>Download from python.org...</p>
<h3>Mac Installation</h3>
<p>Use Homebrew or the installer...</p>
<h2>Your First Program</h2>
<h3>Hello World</h3>
<h3>Variables and Types</h3>Rules:
- One
<h1>per page. - Never skip levels (h1 → h2 → h3, not h1 → h3).
- You can have multiple h2s, h3s, etc.
Anchor Links to Headings
Add id attributes to headings so you can link directly to them.
<h2 id="installation">Installation</h2>
<!-- Link to this section from anywhere -->
<a href="#installation">Jump to Installation</a>
<!-- Link to it from another page -->
<a href="/docs/python.html#installation">
Python Installation
</a>This creates a "table of contents" navigation and lets search engines show "Jump to section" links in search results.
Styling Headings
Default browser sizes are just a starting point. Style them any way you want.
/* The h1 is the most important element visually */
h1 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 1rem;
}
/* Section headings */
h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 800;
margin-top: 2.5rem;
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #1e293b;
}
/* Subsection headings */
h3 {
font-size: 1.25rem;
font-weight: 700;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
/* De-emphasize h4-h6 */
h4, h5, h6 {
font-weight: 700;
margin-top: 1rem;
margin-bottom: 0.5rem;
}SEO Best Practices
Headings are one of the strongest on-page SEO signals. Here's how to use them right:
- One h1 per page, always. It should describe the page's main topic.
- Match the title tag and h1 closely. Slight variations are fine, but they should agree.
- Use keywords naturally. Don't stuff — Google penalizes obvious keyword stuffing in headings.
- Write descriptive headings. "How to Install Python" beats "Installation."
- Don't skip levels. Search engines use the outline to understand your content hierarchy.
- Use h2s for the main sections. Search engines use them to identify subtopics.
- Featured snippets love h2s and h3s. A question phrased as an h2 with a direct answer below is a common snippet pattern.
🎯 Heading Hierarchy Rules
| Rule | Why |
|---|---|
One <h1> per page | Screen readers and Google use it to identify the page topic. |
| Never skip levels | Skipping breaks the document outline and confuses assistive tech. |
| Use headings for structure, not size | If you want bigger text, use CSS on a <p>. Headings have meaning. |
| Don't use headings in navigation menus | Navigation items aren't page sections. Use <nav> with links. |
| Don't repeat the same h2 text | Each heading should be unique — describe the specific section. |
| Close heading tags properly | Unlike <img>, headings are NOT void elements. Always close them. |
⚠️ Common Mistakes
- Multiple
<h1>tags on one page. Confuses search engines and screen readers about the page's main topic. - Skipping heading levels. Going from h1 to h3 without an h2 breaks the outline. Screen readers can't navigate the hierarchy.
- Using headings for styling. If text just needs to be bigger, use CSS on a
<p>. Using<h2>just for size damages accessibility. - Not styling heading sizes. Default browser sizes are inconsistent across browsers. Set your own with CSS.
- Using
<h1>for a logo. A logo is an image or link, not a heading. Use<a>or<img>. - Putting headings inside navigation lists. Navigation is not content hierarchy. Use plain links in a
<nav>. - Using bold text as headings. Bold has no structural meaning. Screen readers ignore
<b>and<strong>for navigation.
♿ Accessibility Notes
- Screen readers announce headings. Users can jump from heading to heading with a keyboard shortcut (H key in most screen readers).
- The heading list is the primary navigation tool for screen reader users. A page with no headings is essentially unnavigable.
- Never skip levels. Screen readers announce "heading level 1," "heading level 2," etc. Skipping levels makes the structure feel broken.
- Use headings to describe, not to decorate. Every heading should accurately describe the content below it.
- One h1 per page. This is the standard — assistive tech expects it and navigation shortcuts rely on it.
❓ Frequently Asked Questions
What are the HTML heading tags?
HTML has six heading tags: <h1> through <h6>. They define the hierarchy of content on a page. <h1> is the highest level (usually the page title) and <h6> is the lowest. Headings are announced by screen readers and used by search engines to understand page structure.
How many h1 tags should a page have?
Exactly one <h1> per page. It should describe the main topic of the page, matching the title tag closely. Using multiple h1 tags confuses search engines and screen readers about what the page is about.
Should I skip heading levels?
No. Never skip levels. Go from <h1> to <h2> to <h3> in order. Skipping levels (like jumping from h2 to h4) breaks the document outline and confuses assistive tech.
Do heading tags affect SEO?
Yes. Headings help search engines understand page structure and content hierarchy. The <h1> is one of the strongest on-page SEO signals for the page's main topic. Proper heading hierarchy can improve rankings and featured snippet eligibility.
Should I use headings just for styling text larger?
No. Headings convey semantic meaning. If you want larger text without a heading, use CSS with a <p> tag. Using <h2> just to make text bigger breaks document structure and hurts accessibility.