HTML Heading Hierarchy: h1 through h6 Best Practices

HTML Heading Hierarchy

HTML headings (<h1> through <h6>) define the hierarchical structure of your document. They are critical for accessibility, SEO, and creating a logical document outline.

Heading Levels

<h1>Page Title (only one per page)</h1>
  <h2>Major Section</h2>
    <h3>Subsection</h3>
    <h3>Another Subsection</h3>
      <h4>Sub-subsection</h4>
  <h2>Another Major Section</h2>
    <h3>Subsection</h3>
      <h4>Detail Level</h4>
        <h5>Fine Detail</h5>
          <h6>Deepest Level</h6>

Rules for Heading Hierarchy

1. One <h1> per page — The h1 should be the main title of the page content
2. Do not skip levels — Do not jump from h1 to h3 (screen readers announce the level)
3. Use for structure, not style — Do not choose headings based on font size; use CSS instead
4. Every section needs a heading — Sections and articles should have associated headings

How Screen Readers Use Headings

Screen reader users frequently navigate pages by jumping between headings. The heading level tells them where they are in the document hierarchy:

• JAWS: Press H to move to the next heading, 1-6 for specific levels
• NVDA: Same heading navigation shortcuts
• VoiceOver: Use the rotor to list all headings by level

SEO Impact

Search engines use headings to understand page structure and content hierarchy:

• The <h1> is treated as the most important heading — include your primary keyword
• <h2> elements define major content sections and are weighted for SEO
• Lower-level headings provide additional context but carry less weight
• Skipping heading levels can confuse crawlers about content hierarchy

Common Mistakes

• Multiple <h1> elements on a single page
• Choosing heading levels based on visual size
• Skipping heading levels (h1 directly to h3)
• Using headings for non-heading content (like navigation labels)
• Not providing headings for page sections