What Are Properly Nested HTML Headings?

If you've ever run an SEO audit, accessibility scan, or website analysis and been told your page has "improper heading hierarchy" or "heading nesting issues," you may have wondered what that actually means.

Properly nested HTML headings simply organize your page into a logical outline. For most WordPress websites, that means using one clear H1 for the page topic, H2 headings for major sections, and H3 headings for related subsections. It helps visitors scan your content, improves accessibility, and makes it easier for Google and AI systems to understand your pages.

This structure is especially important on service pages, location pages, and blog posts where information needs to be organized clearly.

You might be searching for this under different wording, like:

• "Why is WAVE saying my headings are out of order?"
• "Why is my SEO audit complaining about heading hierarchy?"
• "Why shouldn't I skip heading levels?"
• "How do I fix heading order in WordPress?"
• “What does heading hierarchy mean in HTML?”
• “How do I structure H1, H2, H3 for SEO?”
• “What are semantic headings?”
• “What does ‘proper heading order’ mean for accessibility?”
• “Why can’t I jump from H2 to H4?”
• “How do headings help screen readers?”
• “What’s the difference between headings and bold text?”

They’re all pointing to the same idea: headings should form a clear, consistent content outline.

What “properly nested” Headings Actually Means

Think of your page as a business proposal or report. Every heading introduces a new section, and lower-level headings belong inside the section above them. Think of headings like an outline for a report:

 

• <h1> = the title of the page (one main topic)
• <h2> = major sections under that topic
• <h3> = subsections under an <h2>
• <h4> = details under an <h3>
• …and so on.

The core rule is...Don’t skip levels.

Don't choose heading levels based on how large the text looks. Choose them based on where the content belongs in the outline. An <h3> should not appear unless it belongs under an <h2>. An <h4> should not appear unless it belongs under an <h3>.

Good HTML heading nesting example:

• <h1> Emergency Plumbing in Alpharetta
  • <h2> Signs You Need an Emergency Plumber
    • <h3> No Water Pressure
    • <h3> Water Heater Leak
  • <h2> What to Do Before We Arrive
    • <h3> Shut Off the Water
    • <h3> Turn Off the Water Heater

Common Heading Problems We Find During Website Audits

• Every page section is an H2 because someone wanted larger text.
• The phone number is wrapped in an H2.
• An H4 is used because it "looks right."
• The page has three H1 headings generated by the theme and page builder.
• Bold paragraphs are being used instead of real headings.

Why Proper Heading Hierarchy Matters for Your Website

1) It makes your pages easier for customers to scan

Visitors rarely read every word on a webpage. Instead, they scan headings to decide whether your page answers their question. A clear heading hierarchy breaks your content into logical sections so people can quickly find information about your services, pricing, FAQs, process, or service areas.

If someone can understand your page just by reading the headings, you're usually on the right track.

2) It improves accessibility

Screen readers allow users with visual impairments to jump directly between headings. When heading levels are skipped—or headings are used only because they "look nice"—that navigation becomes confusing. Proper heading hierarchy helps make your website easier for everyone to use.

85.7% of screenreader users find proper heading order very or somewhat useful. Source: WebAIM Survey

3) It helps search engines understand your content

Google doesn't read webpages the way people do. It analyzes the structure of your content to better understand what each section is about.

Well-organized headings reinforce your page's topic and show how different sections relate to one another. For example, if your H1 is "Emergency Plumbing in Alpharetta" and your H2 headings cover common plumbing emergencies, response times, and service areas, the page communicates a clear topical structure.

Heading tags alone won't improve rankings, but they help search engines understand the organization of your content.

4) It helps AI understand relationships between topics

AI-powered search systems don't just identify keywords, they also look for relationships between ideas. Proper heading hierarchy helps reinforce those relationships by clearly separating major topics from supporting details. Proper headings reinforce topical structure and make it easier for AI to understand the content to extract accurate answers (especially for pages that need to be summarized or referenced).

For example, a landscaping service page might use H2 headings for Landscape Design, Drainage Solutions, Outdoor Lighting, and Retaining Walls, with H3 headings describing specific services under each category. That structure makes it easier for AI systems to recognize how the information fits together when generating summaries or answering questions.

Proper headings won't make your content appear in AI-generated answers by themselves, but they contribute to a page that's easier for AI systems to interpret alongside high-quality content, internal links, and supporting context.

5) They make websites easier to maintain

Proper heading hierarchy also makes your website easier to manage over time. As you add new services, FAQs, projects, or location pages, a consistent heading structure helps keep every page organized.

At SangFroid Web, we often see small business websites where heading levels have become inconsistent after years of edits by different people. Cleaning up the structure not only improves readability, but also makes future updates much easier.

---

Headings are “Semantic,” Not Visual

This is the biggest mindset shift:

1. A heading tag is not “a big font.”
2. A heading tag is “this is a section title in the outline.”

If you want bigger text, you should style it with CSS (or your page builder’s typography controls), not upgrade it to an <h2>.

Quick test

If you removed all styling and viewed the page like a plain document, would the headings still make sense as an outline?

If not, the heading tags are doing design work instead of structure work.

The simplest way to choose the right heading level

Ask these two questions:

• Is this a new main section of the page?
  → Use <h2>.
• Is this a subsection under the section above it?
  → Use <h3> (or <h4> if it’s nested deeper).

If you feel tempted to jump levels, it usually means one of these is true:

• You skipped a needed parent heading (you need an <h3> but you never created the <h2> section)
• You’re using headings to control styling
• Your content structure is unclear (the page needs reorganizing)

How many H1s should a page have?

For most small business sites, the safest standard is:

• One <h1> per page (the page’s main topic)
• Multiple <h2> sections underneath

Some modern templates technically allow multiple <h1> elements, but in practice (especially on WordPress with page builders), that often creates inconsistent structure, duplicated headings, and confusing outlines. If you want predictable results: use one H1, but it's ok to have more...don't worry about it too much if more than one <h1> is needed.

Example of Proper Heading Nesting in a Real Page

Service page:

• <h1> Roofing Repair in Roswell
  • <h2> Common Roofing Problems We Fix
  • <h2> Our Repair Process
  • <h2> Service Areas
  • <h2> FAQs

Location landing page:

• <h1> Landscaping in Johns Creek
• <h2> Landscaping Services
  • <h3> Maintenance
  • <h3> Drainage
• <h2> Why Homeowners Choose Us
• <h2> Request an Estimate

Blog post

• <h1> How Often Should You Service Your HVAC?
  • • <h2> Typical Maintenance Schedule
    • <h2> Signs Your System Needs Service
    • <h2> FAQs

Quick checklist: are your headings properly nested?

• Only one clear <h1> that matches the page’s main topic
• Headings follow order (H2 → H3 → H4), with no skipped levels
• Headings describe the section (not vague like “More Info”)
• No headings used just to make text bigger/bolder
• Sections feel scannable: if someone reads only the headings, they still understand the page

FAQs About Proper Heading Structure