HTML Heading Tags Guide

Introduction: The Table of Contents for Your Web Page

If you've ever opened a long article or documentation page and immediately scanned for a bold section title to get your bearings, you've already used heading tags the way they were intended - and probably without thinking about it. Headings are the structural scaffolding of a web page, the h1 being the main title and h2 through h6 creating the section and sub-section hierarchy underneath it, and they're doing three jobs simultaneously: helping sighted users scan the page, giving screen reader users a way to navigate by jumping between headings, and telling search engines what each section of your content is actually about. Getting heading structure right is one of those foundational habits that pays off in every direction.

Key Points

  • Structure - HTML headings provide a hierarchical outline to your content that browsers, search engines, and assistive technologies all read.
  • Navigation - Screen reader users navigate pages by jumping between headings - a proper heading structure makes the page usable for them.
  • Organization - Headings break content into scannable sections so sighted users can find what they're looking for without reading everything.

What are HTML Heading Tags?

HTML has six heading elements - h1 through h6 - and they represent a hierarchy of importance and nesting, with h1 being the top-level title and h6 being the deepest sub-section level. Browsers apply default styling that makes h1 the largest and most prominent and h6 the smallest, which is where beginners often go wrong: they pick a heading level because of how it looks visually rather than what it means structurally. That's backwards. You choose the heading level based on where it sits in your document's hierarchy, and then you use CSS to make it look however the design requires.

html
1<h1>Main Title of the Page (The Most Important)</h1>
2<h2>Chapter 1: The Beginning</h2>
3<h3>Section 1.1: The First Steps</h3>
4<h3>Section 1.2: The Initial Challenges</h3>
5<h2>Chapter 2: The Development</h2>
6<h3>Section 2.1: Key Learnings</h3>
7<h4>Sub-section 2.1.1: A Specific Detail</h4>
8<h2>Chapter 3: The Conclusion</h2>

Key Points

  • Hierarchy - Six levels from h1 (most important, top level) to h6 (least important, deepest nesting). Each level should only appear inside a section of the level above it.
  • Semantic meaning - The heading level communicates structural position in the document, not visual size. Choose based on meaning.
  • CSS for styling - Visual size and appearance are controlled entirely with CSS - there's no reason to pick a heading level for how it looks by default.

The Six Levels of Headings Explained

In practice most pages only use h1 through h3 regularly, with h4 showing up occasionally in complex content and h5 and h6 being genuinely rare outside of technical documentation, legal text, and academic articles - the kind of content that needs multiple levels of nested sub-sections. Knowing all six exists is useful; knowing you don't need to manufacture reasons to use h5 is equally useful.

Heading Roles

  • h1 - Main title - The primary heading for the entire page. Describes what the whole page is about. There should only be one h1 per page in most cases - it's the equivalent of a book title.
  • h2 - Major sections - The main sections within the page content. You'll typically have several h2s on a page, each introducing a new major topic. Think of these as book chapters.
  • h3 - Sub-sections - Breaks down an h2 section into smaller parts. If an h2 section covers a broad topic and you need to address specific aspects separately, h3 is what you reach for.
  • h4, h5, h6 - Deep nesting - Further levels of nesting within h3, h4, and h5 sections. Useful for detailed technical manuals, legal documents, and academic content. Not commonly needed in standard web pages.

Why Headings Matter: Beyond Just Size

Using heading tags correctly is one of those HTML practices where the same right decision benefits three completely different things at once: search engines, accessibility, and readability for regular users. Search engines weight the text inside heading tags, especially h1 and h2, more heavily than body paragraph text when deciding what a page is about - so a well-structured heading hierarchy with relevant keywords in the right places is also good SEO without any extra work. Screen reader users navigate pages by moving between headings the way a sighted person scans bold titles, so a page with no headings or broken heading structure is significantly harder to use for anyone relying on assistive technology. And for regular sighted users, headings are the signposts that let someone skim a page and decide whether it's worth reading - most people do that skim before committing to the actual content, and a page that fails it loses visitors.

text
1<!-- What a screen reader or search engine sees as the document outline: -->
2
31. Main Title of the Page (h1)
4    1.1. Chapter 1: The Beginning (h2)
5        1.1.1. Section 1.1: The First Steps (h3)
6        1.1.2. Section 1.2: The Initial Challenges (h3)
7    1.2. Chapter 2: The Development (h2)
8        1.2.1. Section 2.1: Key Learnings (h3)
9            1.2.1.1. Sub-section 2.1.1 (h4)
10    1.3. Chapter 3: The Conclusion (h2)

Key Benefits

  • SEO - Search engines use heading text as a strong signal about what the page and its sections cover. Keywords in h1 and h2 carry more ranking weight than the same words in a paragraph.
  • Accessibility - Screen reader users can navigate a page by jumping between headings. A missing or broken heading structure makes this navigation impossible.
  • Usability - Sighted users scan headings before reading. A clear heading hierarchy dramatically improves how quickly people find what they're looking for.
  • Document outline - The heading structure creates an implicit outline that browsers and assistive technologies expose as a navigation tool.

Best Practices for Using Headings

The rules for headings are few and worth following consistently because breaking them creates problems that are easy to miss visually but real for accessibility and SEO. Never skip heading levels - going from h1 to h3 without an h2 in between breaks the document outline in ways that confuse screen readers and look wrong to SEO tools. One h1 per page is the standard for most content pages - blog posts, product pages, articles - because the h1 signals the page's primary topic to search engines and diluting it across multiple h1s weakens that signal. And if you want text to be big or bold but it's not actually a heading in the document structure, use a paragraph with CSS styling rather than borrowing a heading tag for the visual effect.

html
1<!-- Correct: logical hierarchy, no skipped levels -->
2<h1>Main Title</h1>
3<h2>First Section</h2>
4<h3>Sub-section within First Section</h3>
5<h2>Second Section</h2>
6<h3>Sub-section within Second Section</h3>
7
8<!-- Wrong: skipped heading levels -->
9<h1>Main Title</h1>
10<h3>Section</h3>   <!-- Skipped h2 -->
11<h6>Sub-section</h6>  <!-- Skipped h4 and h5 -->

Common Mistakes to Avoid

The most common heading mistake is choosing a level for its visual size rather than its structural meaning - using h3 because it looks right on the page rather than because the content is a sub-section of an h2 section. The fix is always to use the semantically correct level and then adjust the size with CSS. The second most common mistake is having no headings at all, or just one h1 and then paragraphs for everything else, which leaves search engines and screen readers with no way to understand the page structure. And occasionally people use bold text or the b tag where a heading should be - bold text has no semantic meaning in terms of document structure, so a screen reader user navigating by headings would skip right over it.

html
1<!-- Wrong: heading chosen for visual size, not structure -->
2<h3>This text isn't a sub-section - I just wanted it bigger</h3>
3<p>Some content below...</p>
4
5<!-- Right: correct heading level, CSS handles the size -->
6<h2>Actual Section Heading</h2>
7<p class="large-intro">This text looks bigger because of CSS, not because it's a heading</p>

Headings: The Structural Backbone of Your Content

HTML heading tags are one of those things that look simple - it's just six tags - but using them correctly has real consequences for how search engines rank your page, how accessible it is to people using screen readers, and how quickly regular users can find what they came for. The pattern to internalize is that heading level communicates structure not style, hierarchy should never skip levels, and one h1 per page is almost always the right call. Once those habits are in place you stop thinking about headings as a styling decision and start thinking about them as a document structure decision, which is what they actually are

Frequently Asked Questions

Can I change the size of a heading with CSS?

Yes, and you should style them however your design requires. The browser's default heading sizes are just fallback styles - nothing about h1 being large is fundamental to the tag. You can make an h3 visually larger than an h2 if your design calls for it. The visual size is entirely separate from the structural meaning. What you shouldn't do is choose a heading level based on how it looks by default and then leave it unstyled - choose based on structure, then style with CSS.

Is it bad for SEO to have multiple h1 tags?

The HTML5 spec technically allows multiple h1 elements in separate article or section elements with their own document outlines, and Google has said they handle it fine. But for most standard pages - blog posts, product pages, landing pages - sticking with one h1 is still the cleaner practice. The h1 is your strongest signal to search engines about what the page is about, and spreading that across multiple h1s is rarely useful. The exception might be something like a page aggregating multiple distinct articles, but for typical content a single h1 is the right default.

What is the difference between a heading and the title tag?

They serve different purposes in different locations. The title tag lives in the head section of the document - it's what appears in the browser tab, in bookmarks, and as the clickable link in Google search results. Users don't see it on the page itself. The h1 heading lives in the body and is the main visible title users see at the top of the content. They often contain similar text but serve different audiences: the title tag is optimized for search results and browser tabs, the h1 is written for the person reading the page.

How do I check if my heading hierarchy is correct?

Several options. Browser extensions like HeadingsMap or the Accessibility Insights extension show you the page's heading outline visually so you can spot any skipped levels instantly. Chrome and Firefox DevTools accessibility panels also show heading structure. The W3C validator flags heading hierarchy issues. Or just look at your HTML manually and check that every heading is one level deeper than the one it logically sits under - no h3 without an h2 above it, no h4 without an h3 above it.

Should every page have an h1?

Yes, with very few exceptions. The h1 is the page's main title - it tells users and search engines what the page is about. A page without an h1 is missing its most important structural signal. If you're building a page where a prominent visual title exists but you've styled it with CSS on a div or p tag, consider switching it to an h1. The accessibility and SEO benefits cost nothing to implement.