When building a website, it’s easy to focus on the visual side of headings (how big they look, how they fit into a design) and forget about their real job: giving structure, meaning, and clarity to your content.
At Starboard, I believe accessible, structured content isn’t just good practice – it’s essential for creating websites that work for everyone. From screen readers to SEO crawlers (and even your future self editing the site), correctly using H1, H2, H3 and other headings makes a real difference.
In this post, we’ll break down what these heading levels mean, why they matter, and how to use them properly, with simple tips you can apply to any site.
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
Wrapping up
Using headings the right way isn’t just about ticking an SEO box, it’s about creating a better experience for every visitor to your site. Clear, logical structure makes content easier to navigate, improves accessibility, and ensures your site grows sustainably over time.
At Starboard, accessibility and user-first design are at the heart of every project I deliver. If you want a website that’s not just beautiful, but built on solid foundations, I’d love to help.
Get in touch and let’s build something future-proof together.
