A small business owner was writing a detailed blog post for their website, explaining their services step by step. To make it look nice, they picked whichever heading size looked visually appealing at each point — sometimes big and bold, sometimes smaller, based purely on what looked good on the page.
The post looked perfectly fine to the eye. Clean, organised, easy to skim.
Weeks later, someone mentioned that when they used a screen reader (special software that reads website content aloud for people with visual impairments) to jump between sections of the page, it felt confusing and jumbled, as if the sections weren't properly connected to each other. Around the same time, the business owner noticed their blog posts weren't appearing as clearly structured, useful results in search engines, compared to similar articles from competitors.
Nothing was wrong with the writing itself. The real issue was quietly sitting in how the headings were chosen — not by what they meant, but by how they looked.
Let's understand what it really means.
What Is Heading Hierarchy?
Heading hierarchy is the logical order of heading levels used to organise a webpage's content — starting from the biggest, most important heading and moving down through smaller, more specific ones, in the correct sequence.
In website code, headings are usually labelled H1 (the main heading), H2 (major sections), H3 (sub-sections within an H2), and so on, down to H6. Think of it like a set of nested folders on a computer. You wouldn't put a sub-folder for "Invoices" directly inside your main hard drive without it belonging to a proper parent folder like "Finance." Skipping that structure would still technically work, but it would confuse anyone trying to navigate through it logically.
Heading hierarchy works the same way — it's not just about how big or bold text looks, but about clearly showing which sections belong under which, in the correct order.
Why Should You Care About This?
- Screen reader navigation — many visitors using screen readers jump directly between headings to quickly find the section they need, much like flipping through a book's table of contents. A broken hierarchy makes this confusing or unreliable.
- Search engine understanding — search engines use heading structure as one signal to understand what your content is about and how it's organised.
- Reader clarity — even visitors who aren't using any special tools subconsciously rely on consistent heading sizes to understand which points are major topics and which are smaller details.
- Content maintainability — a logical heading structure makes it much easier to edit, reorganise, or expand your content later without confusion.
Where Do You See This in Daily Life?
- Using a "jump to section" feature on a long article or documentation page
- Skimming a page quickly by scanning bold section titles before deciding where to read in detail
- A screen reader user asking their software to list all the headings on a page to quickly choose where to go
- Search engines showing expandable sections or direct links to specific parts of a page in search results
How Does It Actually Work?
Every properly structured page typically has one main H1 heading, representing the overall topic of that page. Below that, H2 headings represent major sections, and H3 headings represent sub-sections within a specific H2, and so on.
Here's an important nuance beginners often overlook: heading levels should follow their logical order without skipping unnecessarily, but this doesn't mean every single heading level must always be used on every page. For example, a simple page might reasonably go from H1 straight to H2 without ever needing an H3, if there are no deeper sub-sections. What matters is not using headings out of order — such as jumping from an H2 directly to an H4 while skipping H3 — simply because a smaller size looked visually better at that spot.
It's also worth understanding that heading size and heading level are two different things. A designer can make an H3 look large and bold through styling, while still keeping it correctly nested as an H3 in the actual code. The visual size is a design choice; the heading level is a structural one.
Common Examples
- A recipe website uses one clear H1 for the recipe title, H2 headings for "Ingredients" and "Instructions," and H3 headings for smaller subsections like "For the sauce" — creating a clean, logical structure.
- A blog post picks heading sizes purely based on how they look on the page, occasionally skipping levels, making the underlying structure inconsistent even though it looks fine visually.
- A documentation page uses a full, deep hierarchy — H1 through H4 — to organise complex, layered information clearly.
Benefits of Getting Heading Hierarchy Right
- Makes your content genuinely easier to navigate for visitors using screen readers
- Helps search engines better understand and organise your content
- Improves readability and scannability for all visitors
- Makes future edits and content reorganisation much simpler
Risks or Limitations to Understand
- Proper heading hierarchy alone does not guarantee strong search rankings — it's one supporting factor among many
- Overcomplicating a simple page with unnecessary heading levels can add clutter rather than clarity
- Heading hierarchy affects structure and navigation, not visual styling directly
- Fixing heading order on an existing website may require reviewing many pages individually
Common Mistakes Beginners Make
- Choosing heading levels based purely on visual size rather than logical structure
- Skipping heading levels, such as jumping from H2 directly to H4, without a genuine sub-section in between
- Using multiple H1 headings on a single page, when generally one clear main heading per page works best
- Not realising the issue exists until a screen reader user or a technical audit points it out directly
Beginner Tips
- Plan your heading structure like an outline before writing, rather than choosing sizes as you go.
- Use one clear H1 for the main topic of each page, and build downward logically from there.
- Avoid skipping levels — if you're using an H2, the next deeper section should be an H3, not an H4.
- Separate design from structure — if a heading needs to look bigger or smaller for design reasons, adjust its styling rather than changing its actual heading level.
- Review your existing pages periodically, since heading structure is easy to overlook during quick edits.
Manual Check Guide: How to Check This Yourself
- Open any page on your website in a browser.
- Right-click anywhere on the page and select "Inspect" to open your browser's developer tools.
- Use the search feature within the developer tools (usually available with Ctrl+F or Cmd+F inside that panel) and search for `
