Heading Structure That Guides

Headings aren’t just for styling: they define your content’s outline. Screen readers use them like a table of contents, helping users skip to the section they want. A clear, logical heading structure also benefits everyone: it improves scan-ability and makes your content easier to follow.

But don’t just use heading levels because they look right. Use them to reflect the meaning and hierarchy of your content.

Good Practice

Start with one <h1> — this should reflect the page’s main topic or title. Use <h2> for top-level sections, <h3> for subsections of those, and so on. The structure should follow a clear, logical order.

Examples:

<h1>Documentation</h1>
  <h2>Getting Started</h2>
    <h3>Installation</h3>
    <h3>Basic Concepts</h3>
  <h2>Advanced Topics</h2>
    <h3>Customization</h3>
    <h3>Performance Tuning</h3>

Bad Example:

<h1>Documentation</h1>
  <h3>Getting Started</h3> <!-- Skips h2 -->
    <h2>Installation</h2> <!-- Goes back to h2 -->
    <h4>Basic Concepts</h4> <!-- Skips h3 -->
  <h2>Advanced Topics</h2>
    <h4>Customization</h4> <!-- Skips h3 -->
    <h3>Performance Tuning</h3>

Pro Tip

You can inspect heading structure easily with browser extensions like:

• HeadingsMap (Firefox/Chrome)

Do this today: Open a long article or page you’ve worked on. Outline the headings manually or use an extension. Does every heading follow a logical level? If you see an <h3> that isn’t a subsection of an <h2>, revise the hierarchy.