How to use H1, H2, H3 (and friends) the right way

When it comes to creating websites, whether you’re writing content, designing layouts, or developing templates, heading tags (<h1> to <h6>) play a critical role. Yet I see them used wrong all the time – by content creators, website managers, and even web developers.

This post will guide you through how to use headings correctly, with a focus on semantic HTML, accessibility, and structure.

Let’s start off with what heading tags are.

What are heading tags?

HTML provides six levels of headings: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

These tags define the hierarchy of your content, like an outline:

• <h1> – The main title of the page
  • You should only have one h1 per page. This is the title that tells search engines what your page is about. For example, on this post, it’s “How to use H1, H2, H3 (and friends) the right way”
• <h2> – A major section within the page
• <h3> – A sub-section of the h2 section
• …and so on.

They’re not for decoration, they tell both browsers and assistive technologies how your content is structured.

Why heading structure matters

1. Accessibility

Screen readers often let users navigate by headings, just like skimming a table of contents. If the heading levels are missing or out of order, users relying on assistive tech can get completely lost.

For example, a sight impaired user might press a key to hear all the <h2> tags on a page to get an overview. If the page skips from <h1> to <h4>, they’ll think they’ve missed content—or that the page is poorly built.

2. SEO

Search engines use headings to understand the structure and relevance of your content. A proper heading hierarchy helps Google know what your page is about, and how it’s organised.

3. Usability for everyone

Even sighted users benefit. Headings break up long blocks of text and make content easier to scan and digest, especially on mobile.

Best practices for using headings

Use one <h1> per page

The <h1> should be reserved for the main title of your page—usually the post title or product name. It’s the top-level heading and should only appear once.

Use headings in logical order

Headings should nest like an outline:

<h1>Page Title</h1>
  <h2>Section One</h2>
    <h3>Sub-section</h3>
  <h2>Section Two</h2>

Don’t skip levels—for example, jumping from <h2> straight to <h4> breaks the structure.

Use headings to organise content

Think about headings as signposts that guide your users through the page. Use them to introduce major topics or shifts in context, not just because they look bold.

Style headings with CSS, not based on size

This is one of the biggest mis-uses of headings that I see on almost every website I work on. Often a user will pick a heading number because of the way it looks.

Don’t choose an <h2> just because it’s the right font size. Style your headings in CSS so that any heading level can look however you like, while preserving the correct semantic structure.

Common mistakes to avoid

• ❌ Using <h2>s everywhere because they “look nice”
• ❌ Skipping heading levels, like going from <h1> to <h4>
• ❌ Not using headings at all, just bold text or divs/paragraphs with class names
• ❌ Using headings for non-heading content (e.g. <h3>Phone: 01234 567890</h3> – not correct!)

Tips for content editors

• Think in outlines: if your content were a book, what would be the chapter titles? That’s your <h2>.
• In WordPress/Gutenberg, use the Heading block instead of manually styling paragraphs.
• Use the HeadingsMap browser extension or an accessibility checker (like WAVE) to preview your structure.

Tips for developers

• Make sure your templates include one <h1> per page.
• Use heading levels logically in reusable blocks/components.
• Don’t flatten all headings to <h2> for convenience – use SCSS and utility classes to handle styling, not semantics.
• If you need visual hierarchy but not structural hierarchy, use a <span> or <p> with styled classes instead.

Tools to check heading structure

Here are a few tools to help you check your heading hierarchy:

• WAVE (WebAIM)
• HeadingsMap browser extension (Chrome/Firefox)
• Axe DevTools – Great for automated accessibility checks

To summarise

Getting your heading structure right is one of the simplest, most impactful things you can do for your website. It makes your content easier to navigate, improves SEO, and most importantly, makes your site more inclusive for all users.

So next time you’re writing a blog post, building a page, or developing a new template – ask yourself: Am I using my headings semantically?

If the answer’s yes, your users (and your future self) will thank you.