Headings That Make Sense

Headings are not font sizes. They are document structure. A screen reader user can pull up a list of all headings on a page and jump between them — exactly the way a sighted user skims the page visually. That only works if the heading hierarchy makes logical sense.

What headings represent

HTML headings <h1> through <h6> represent a document outline. The number indicates the level in that outline — not the visual size of the text. CSS controls visual size; headings control structure.

Think of headings like a table of contents:

h1 — Chapter title
  h2 — Section
    h3 — Subsection
    h3 — Subsection
  h2 — Section
    h3 — Subsection

Every heading level implies that there is a parent heading above it at a higher level.

How screen readers use headings

Screen readers offer a “headings navigation” mode. The user presses a key and the reader announces each heading in order — or they can jump to all <h2> headings, or all <h3> headings. This is one of the primary ways screen reader users navigate a long page.

If headings are skipped, inconsistent, or used for visual styling rather than structure, this navigation mode becomes unreliable or useless.

Correct heading hierarchy

Rule 1: One <h1> per page.

The <h1> is the primary heading of the page. Every page has exactly one. On the Summit Trail Outfitters homepage it is the hero headline. On the Tours page it is “Our Tours.” On the Blog Article page it is the article title.

Rule 2: Do not skip levels.

Jumping from <h2> to <h4> is a structural error. A screen reader user navigating headings will encounter an <h4> with no parent <h3> — the outline is broken.

<!-- Wrong — skips h3 -->
<h2>Popular Tours</h2>
<h4>Pine Ridge Loop</h4>

<!-- Correct -->
<h2>Popular Tours</h2>
<h3>Pine Ridge Loop</h3>

Rule 3: Headings reflect content hierarchy, not visual preference.

Never choose a heading level because of how it looks. If a subsection heading looks “too big” as an <h3>, fix it with CSS — do not use <h5> just because it renders smaller.

Good vs poor heading structure

Poor — visual, not structural:

<h1>Summit Trail Outfitters</h1>
<h3>Your Next Adventure Starts Here</h3>  <!-- skips h2 -->
<h2>Pine Ridge Loop</h2>                  <!-- should be h3, inside a tours section -->
<h2>River Canyon Trail</h2>
<h5>Book Now</h5>                         <!-- skips h3, h4 -->

Good — logical document outline:

<h1>Your Next Adventure Starts Here</h1>
<h2>Popular Tours</h2>
  <h3>Pine Ridge Loop</h3>
  <h3>River Canyon Trail</h3>
<h2>Who We Are</h2>
<h2>Stay in the Loop</h2>

How headings help beyond screen readers

Search engines use heading structure to understand page content — <h1> is the primary topic, <h2> elements are main sections. This is a basic SEO signal.

Sighted users skim pages by scanning headings. A logical hierarchy makes the page faster to scan and easier to understand at a glance.

Developers reading code use headings to understand page structure at a glance. Well-structured headings make maintenance easier.

Exercise

Open each Summit Trail Outfitters page and audit the heading structure.

For each page, write out the heading outline — just the heading text and level:

index.html:
  h1: Your Next Adventure Starts Here
  h2: Popular Tours
    h3: Pine Ridge Loop
    h3: River Canyon Trail
    h3: Summit Challenge
  h2: Who We Are
  h2: What Our Guests Say
  h2: Stay in the Loop

Then verify:

• Exactly one <h1> per page
• No heading levels skipped
• Every heading describes the content that follows it
• No heading used for visual styling rather than structure

Fix any page that fails. A heading change is a one-line edit — <h4> to <h3> is the whole change.

Recap

• Headings create a document outline, not visual formatting. CSS controls size; headings control structure.
• One <h1> per page. Never skip heading levels. Headings nest logically — each level is a subdivision of the one above.
• Screen reader users navigate pages by jumping between headings — a broken hierarchy breaks that navigation.
• Search engines use headings to understand page topics.
• Fix heading hierarchy with element changes, not CSS workarounds.