What Are Properly Nested HTML Headings?

If you’ve ever been told your page needs “properly nested headings,” to “fix your heading hierarchy,” or to “use semantic headings correctly”—but weren’t sure what that actually means—this article breaks it down.

Properly nested HTML headings simply means your page uses heading tags (<h1> through <h6>) in a logical outline—like a table of contents—with no random jumps or “fake headings” created with bold text.

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

• “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 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.

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 bad HTML heading nesting patterns:

• Jumping: <h2> → <h4> because you want smaller text
• Using headings for styling: making a phone number an <h2> so it looks big
• Multiple <h1>s used as design elements: (sometimes ok in HTML5, but often messy in real-world CMS builds and page builders)

Why HTML Heading Hierarchy Matters

1) It helps visitors scan and understand your page

Most people don’t read pages top-to-bottom. They skim. A clear heading structure makes it easy to find what they need fast.

2) It improves accessibility

Screen readers, often used by users with vision problems, use headings as navigation landmarks. When headings are out of order or used for decoration, screen-reader users can’t “jump” through the page in a logical way.

3) It supports SEO and AI interpretation

Search engines and AI tools use headings to understand what the page is about and how sections relate. 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).

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