It's a common misconception that those numbers relate to size and style alone.
H1 looks big and bold, H6 looks small and subtle, so it's understandable that you'd reach for an H1 when you want something to stand out, or an H4 when you want something more subtle.
But heading levels aren't about style. They're about structure. And getting that structure right matters for two big reasons: accessibility and SEO.
Headings create a hierarchy that organises your content. They show how ideas relate to each other. Think of them as a table of contents that both people and technology can read.
When someone uses a screen reader to navigate your site, they can jump between headings to find what they need. It's like skimming a book by reading the chapter titles. If your headings are out of order or missing, that navigation breaks down. People get lost.
Search engines work the same way. Google reads your headings to understand what your page is about and how the information is organised. Clear heading structure helps your content rank better because it's easier to parse and index.
I explain heading structure to clients like this:
- H1 is the solar system. It's the top level. The big picture. Every page gets one H1, and it tells you what the whole page is about. Just one. That's the topic of your page.
- H2 is Earth. We look at a planet within that solar system. These are your main topics. After the H1, you can use multiple headings, in this example of planets such as Jupiter or Mercury. Make sure the information still follows a logical structure and is related to the heading above it.
- H3 is a continent. Let's say Europe. We're getting more specific, but still part of the larger hierarchy of the page.
- H4 is a country. France. A distinct area within that continent, but nested inside it.
- H5 is a city. Paris. Smaller again, but logically connected to the level above.
- H6 is a landmark or suburb. The Eiffel Tower, or a specific neighbourhood. This is the most granular level. You don't always need to go this deep, but it's there if your content calls for it.
The key is that each level nests logically inside the one above it. You wouldn't jump from the solar system straight to a landmark. And you wouldn't have two solar systems on the same page, because each page covers one main topic.
Like skimming a book by reading the chapter titles. If your headings are out of order or missing, that navigation breaks down.
Let's say you run an online clothing store and you're building a page about your products.
H1: Shop
H2: Women's clothing
H3: Dresses
H4: Casual dresses
H4: Formal dresses
H3: Tops
H3: Pants
H2: Men's clothing
H3: Shirts
H3: Pants
H2: Accessories
H3: Bags
H3: Jewellery
See how each level relates to the one above it? Women's clothing and men's clothing are both categories within the shop (H2 under the H1). Dresses are a type of women's clothing (H3 under that H2). Casual dresses are a type of dress (H4 under that H3).
If you wanted your "Casual dresses" heading to look bigger or bolder, there are other ways to style it differently. You wouldn't change it to an H2 just because you want it to stand out more visually.
Squarespace, Wix, and a lot of other platforms make it really easy to treat headings as styling tools. You see that dropdown, you pick the one that looks right, and you move on.
But here's what happens in the back-end: your code ends up with headings that skip levels, repeat the top level, or jump around without logic. A screen reader user hits your page and can't tell what's a main section and what's a detail. Google tries to figure out your page structure and gets confused.
The fix is simple. Choose your heading level based on hierarchy, not appearance. Then use your platform's styling options (or custom CSS) to make it look however you want.
Using H1 multiple times on one page. You only get one universe per page. If you need multiple big headings, they should be H2s.
Skipping levels. Don't jump from H2 straight to H5. Work your way down the hierarchy logically.
Picking headings based on size. Style is separate from structure. Decide on the heading level first, then adjust the visual design.
Forgetting to use headings at all. If you've got paragraphs of text with no headings breaking it up, that's hard to navigate for everyone. Add headings to organise your content and give people (and search engines) clear guidance on the content.
People who use screen readers rely on heading structure to move through your page efficiently. They can pull up a list of all your headings and jump straight to the section they need.
If your headings are out of order or incorrectly nested, that navigation tool becomes useless. It's like handing someone a map where the streets are labelled randomly.
Good heading structure also helps people with cognitive disabilities, anyone reading on a small screen, and honestly, anyone skimming quickly to find what they need. Clear hierarchy makes content easier to process.
Google uses your headings to understand your content. The H1 tells it what the page is about. The H2s show the main topics you cover. The H3s and below add detail and context.
If your headings are clear and logical, Google can index your page more effectively. That means better rankings, better visibility, and more people finding what you offer.
Headings also show up in search results and featured snippets. When your structure is solid, your content is more likely to be pulled into those prime positions.
Most browsers let you inspect your heading structure without needing to know code.
In Chrome or Firefox, right-click on your page and select "Inspect" or "View Page Source." Look for the HTML tags: <h1>, <h2>, <h3>, and so on. Check that they follow a logical order and don't skip levels.
There are also free tools like WAVE (from WebAIM) or the HeadingsMap browser extension that show you a visual outline of your headings. You can see at a glance if your hierarchy makes sense.
If you spot issues, go back into your website editor and adjust the heading levels. Most platforms let you change this without affecting the visual design.
Heading levels are about structure, not style. They create a hierarchy that helps people navigate your content and helps search engines understand your page.
Pick your heading level based on where it sits in the hierarchy. Then style it to look however you want.
One H1 per page. H2s for main sections. H3s and below for subsections. No skipping levels.
Get this right, and your site works better for everyone: people using assistive technology, people skimming on their phone, and search engines trying to figure out what you do.
It's one of those small things that makes a surprisingly big difference.
Need help getting your website structure sorted? I work with clients to audit and improve their site accessibility, including heading structure, colour contrast, and all the other details that matter. Get in touch if you'd like a hand.
Spend a day with me focused on your most important brand or website updates. Together we’ll turn your ideas into action and finish what’s been waiting on your list.
