The role of H1 to H6 tags in content hierarchy

When I first started writing HTML, I made the same mistake almost every junior developer makes: I used heading tags (<h1> through <h6>) just to change the size and boldness of my text.

Need really big text? Throw an <h1> on it. Need it slightly smaller? Make it an <h3>.

It looked fine on the screen, but under the hood, I was actively destroying my website's Technical SEO and accessibility.

Here is the truth: Heading tags are not styling tools. They are the skeleton of your web page.

How Googlebot Reads Your Headings
When a search engine crawler visits your page, it does not care about your CSS. It looks at your HTML DOM to understand the context of your content. The <h1> to <h6> tags create an outline, much like the table of contents in a book.

If your "table of contents" jumps from Chapter 1 (<h1>) straight to a sub-bullet point (<h4>), the crawler gets confused. Confused crawlers do not rank pages well.

The Golden Rules of Hierarchy

Only ONE <h1> per page: Your <h1> is the title of the book. It should clearly state the main topic of the page and contain your primary keyword.

Never skip levels: You should always go from <h2> to <h3>. Never jump from an <h2> down to an <h4>.

Use CSS for visual size: If you need an <h2> to look visually smaller, change its font size in your CSS file. Do not swap it for an <h5> just to change the appearance.

Code Comparison

The "Styling" Approach (Bad for SEO):

HTML

<header>
  <h3>Welcome to My Tech Blog</h3> </header>
<main>
  <h1>Learn React Today</h1> <h5>Why React is great</h5> <p>React makes UI building easy...</p>
</main>

The "Hierarchy" Approach (Excellent for SEO):

HTML

<header>
  <p class="site-title">Welcome to My Tech Blog</p> </header>
<main>
  <h1>Learn React Today</h1> <h2>Why React is great</h2> <p>React makes UI building easy...</p>
</main>

Pros and Cons of Strict Hierarchy

Pro - Better Featured Snippets: Google often uses properly structured <h2> and <h3> tags to generate list-based featured snippets at the top of search results.

Pro - Web Accessibility (a11y): Screen reader users often use keyboard shortcuts to jump from heading to heading. A broken hierarchy breaks their navigation.

Con - Design Constraints: Requires designers and developers to communicate better so that logical structure aligns with visual designs.

Official Documentation

MDN Web Docs: Heading Elements