Heading Hierarchy

Heading hierarchy is the practice of using <h1> through <h6> elements in a logical, nested order that reflects the content structure of the page, just like the outline of a book or report. Headings must not skip levels, and a page should have exactly one <h1>. Heading hierarchy is critical for screen reader navigation, SEO, and general content comprehension.

Category: Accessibility (also: Front End, SEO)

Author: Atomic Glue Team

## Definition

Heading hierarchy refers to the structured use of HTML heading elements (<h1> through <h6>) to create a meaningful outline of the page's content. Headings are the primary way screen reader users navigate a page (by pressing H to jump between headings, or 1 through 6 to jump to a specific level). A proper heading hierarchy starts with a single <h1> that describes the overall page content, followed by <h2> elements for major sections, <h3> elements for subsections, and so on. Skipping levels (going from <h2> to <h4>) violates WCAG 1.3.1 Info and Relationships (Level A) because it breaks the semantic structure and misleads assistive technologies about the content's organisation. Heading hierarchy is also a strong SEO signal. Search engines use headings to understand topic hierarchy and relevance. A well-structured heading outline improves both accessibility and search ranking simultaneously.

## Heading hierarchy rules

Every page must have exactly one <h1> that describes the main topic or purpose of the page. Do not use more than one <h1> per page. Section headings should be nested without skipping levels: <h1> followed by <h2>, then <h3> for subsections, then <h4>, and so on. If a new section starts, return to <h2> (or the appropriate level for the top of that section). Headings must be descriptive of the content that follows. "Products" is a better heading than "Section 1". Headings are for structure, not for visual styling. If you need a large-text design element that is not a structural heading, use CSS to style a <span> or <div> rather than misusing a heading tag.

## Common heading hierarchy failures

Multiple <h1> elements per page: confuses screen readers and search engines. Skipping levels (<h1> to <h3>): WCAG violation, breaks the content outline. Using headings purely for visual size (choosing <h2> because it looks better than <h3>): breaks the relationship between structure and content. Empty headings (a heading tag with no content or only a spacer): confuses navigation. Using heading tags for design elements (logo, taglines, decorative text): pollutes the navigation outline with non-structural items. Styling non-heading text to look like a heading and adding role="heading": unnecessary when you could just use the correct heading element.

## In code

<!-- Good heading hierarchy -->
<h1>Atomic Glue Services</h1>
  <h2>Web Development</h2>
    <h3>Custom Web Applications</h3>
    <h3>E-commerce Platforms</h3>
  <h2>Design Services</h2>
    <h3>UI/UX Design</h3>
    <h3>Brand Identity</h3>

<!-- Bad: skipped level and multiple h1s -->
<h1>Atomic Glue</h1>
<h1>Our Services</h1>  <!-- Two h1s: bad -->
  <h3>Web Development</h3>  <!-- h1 to h3: level skip, missing h2 -->

## Common questions

Q: Can I visually hide an <h1> for design purposes and use a different visual element?

A: Yes. You can use an <h1> with visually hidden text (using CSS that keeps it accessible to screen readers) and display a branded visual title separately. The <h1> is for structure and navigation. The visual header can be anything. Just ensure the <h1> is actually descriptive and available to assistive technology.

Q: Does heading order matter for SEO?

A: Yes. Google's algorithms use headings to understand page structure and topic hierarchy. A natural heading outline with a single <h1>, clear <h2> sections, and nested <h3> sub-sections strongly signals content organisation and relevance. It is not a primary ranking factor, but it contributes to page quality assessment.

## Key takeaways

• One <h1> per page describing the page content.
• Nest headings without skipping levels (<h1> > <h2> > <h3>).
• Headings are screen reader navigation anchors; skipping levels breaks the outline.
• Use headings for structure, not for visual styling.
• Heading hierarchy benefits both accessibility and SEO.

## Related entries

• [Semantic HTML](atomicglue.co/glossary/semantic-html-website-development)
• [Landmark Elements](atomicglue.co/glossary/landmark-elements)
• [Screen Reader](atomicglue.co/glossary/screen-reader)
• [Accessibility (a11y)](atomicglue.co/glossary/accessibility)

Last updated July 2026. Permalink: atomicglue.co/glossary/heading-hierarchy