Skip to main content

Welcome to our new website! The content and organization have been heavily redone and we want to hear from you! 
Submit feedback

Heading Structure Fundamentals

How to create proper heading hierarchies in web pages and documents.

🏗️ Foundation of accessible content

Why headings matter

Headings (H1-H6) are one of the most important accessibility features. They provide:

  • Navigation: Screen reader users can jump between headings (H key in NVDA/JAWS)
  • Structure: Headings create a document outline that shows relationships
  • Scannability: All users benefit from clear section organization
  • SEO: Search engines use headings to understand page content

Research findings

WebAIM's screen reader user surveys consistently show that navigating by headings is the primary way users explore web pages. 67.5% of users report navigating by headings "always" or "often" (WebAIM Survey #10, 2024).

Core rules for headings

1. Use only one H1 per page

The H1 should be the main page title. It tells users what the page is about.

 

✓ Correct 

<h1>Course Registration</h1>
<h2>Spring 2026 Schedule</h2>
<h2>How to Register</h2>

✗ Incorrect 

<h1>University of Arizona</h1>
<h1>Course Registration</h1>
<h1>Spring 2026</h1>

2. Don't skip heading levels

Go from H1 → H2 → H3 in order. Never jump from H1 to H3 or H2 to H5.

 

✓ Correct hierarchy 

H1: Page Title
  H2: Major Section
    H3: Subsection
    H3: Subsection
  H2: Another Section
    H3: Subsection

✗ Skipped levels 

H1: Page Title
    H3: Section (skipped H2!)
        H5: Topic (skipped H4!)
  H2: Another Section

3. Headings must describe content

Each heading should clearly describe the section that follows it.

  • Good: "How to Submit Your Assignment"
  • Poor: "More Information" or "Section 3"

4. Use headings for structure, not styling

Don't choose heading levels based on how they look. Use CSS for visual styling.

 

✓ Correct approach 

<h2>Contact Information</h2>
/* Style with CSS */
h2 { font-size: 1.5rem; }

✗ Incorrect approach 

<!-- H4 used because it's smaller -->
<h4>Contact Information</h4>
<!-- But this breaks hierarchy -->

Headings in HTML

Basic HTML heading elements

<h1>Main Page Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Minor section</h5>
<h6>Smallest heading</h6>

Common mistakes

  • Using bold instead of headings: <p><strong>Section Title</strong></p> looks like a heading but isn't
  • Using heading classes on non-headings: <p class="h2">Title</p> has no semantic meaning
  • Empty headings: <h2></h2> or headings with only images and no text

ARIA and headings

You can add heading roles with ARIA, but native HTML is preferred:

<!-- Native (preferred) -->
<h2>Section Title</h2>

<!-- ARIA (use only when necessary) -->
<div role="heading" aria-level="2">Section Title</div>

Headings in content management systems

WordPress / Drupal / CMS Rich Text

  1. Select your heading text
  2. Look for a "Paragraph" or "Format" dropdown
  3. Choose "Heading 2", "Heading 3", etc.
  4. Note: H1 is usually the page title, so start content with H2

Brightspace (D2L)

  1. In the HTML Editor, select your text
  2. Click the Format dropdown
  3. Choose the appropriate heading level

Microsoft Word (for web content authors)

Use Word's Styles gallery (Home tab) to apply Heading 1, Heading 2, etc. These will transfer when copying to web editors.

Headings in documents

Microsoft Word

  • Home tab → Styles gallery
  • Keyboard: Ctrl+Alt+1 through Ctrl+Alt+3
  • Use Navigation Pane (View → Navigation Pane) to see structure

Google Docs

  • Click Normal text dropdown → Choose heading level
  • Keyboard: Ctrl+Alt+1 through Ctrl+Alt+6
  • View → Show document outline to verify structure

PowerPoint / Google Slides

  • Slide titles function as H1 for each slide
  • Use text hierarchy within slides consistently
  • Every slide needs a unique title

Testing heading structure

Browser extensions

  • WAVE: Shows heading outline with errors highlighted
  • HeadingsMap: Creates visual outline of page headings
  • Web Developer: Outline → Show Element Tag Names

Screen reader testing

  • NVDA/JAWS: Press H to jump between headings
  • VoiceOver: Use rotor (VO+U) to list all headings
  • Can you understand page structure from headings alone?

Document testing

  • Word: View → Navigation Pane shows heading outline
  • Acrobat: View → Navigation Panels → Tags
  • Google Docs: View → Show document outline

Real-world examples

Good example: Course syllabus page

H1: ENGL 101: Introduction to Academic Writing
  H2: Course Description
  H2: Learning Outcomes
  H2: Required Materials
    H3: Textbooks
    H3: Software
  H2: Grading
    H3: Assignments
    H3: Participation
  H2: Schedule
    H3: Week 1
    H3: Week 2
  H2: Policies
    H3: Attendance
    H3: Academic Integrity

Good example: Department home page

H1: Department of Chemistry
  H2: About Us
  H2: Academic Programs
    H3: Undergraduate
    H3: Graduate
    H3: Research
  H2: People
    H3: Faculty
    H3: Staff
    H3: Graduate Students
  H2: News & Events
  H2: Contact

Quick checklist

  • check_box_outline_blank Only one H1 per page (the main title)
  • check_box_outline_blank Headings follow sequential order (no skipping)
  • check_box_outline_blank All headings are descriptive
  • check_box_outline_blank Headings used for structure, not styling
  • check_box_outline_blank No empty headings
  • check_box_outline_blank Heading levels match content hierarchy
  • check_box_outline_blank Tested with heading outline tool

Resources