Heading Structure Best Practices

Why Headings Matter

• Screen reader navigation:Users can press H to jump between headings, or pull up a headings list to navigate
• Cognitive accessibility:Clear structure helps everyone scan and understand content
• SEO:Search engines use headings to understand page content
• WCAG 1.3.1:Information and relationships must be programmatically determinable

The Rules of Headings

Rule 1: One H1 Per Page

Every page should have exactly one <h1> that describes the page's main topic.

• This is typically the page title
• It should be unique to that page
• In CMSs like Brightspace, the system often adds the H1 automatically

Rule 2: Don't Skip Levels

Headings must nest logically. Don't jump from H2 to H4.

<h1>Page Title</h1>
<h2>Section A</h2>
<h4>Subsection</h4> Skipped H3!
<h2>Section B</h2>

<h1>Page Title</h1>
<h2>Section A</h2>
<h3>Subsection</h3> Proper nesting
<h2>Section B</h2>

Rule 3: Headings Reflect Structure, Not Style

Use headings to create an outline—not to make text big or bold.

• If you want big bold text that isn't a section title, use CSS instead
• Don't use H4 just because you want smaller text than H3
• Every heading should introduce a new section of content

Rule 4: Use Real Heading Elements

<p><strong>Important Section</strong></p>
<p class="heading">Another Section</p>
<div style="font-size:24px">Big Text</div>

<h2>Important Section</h2>
<h2>Another Section</h2>
<h3>Subsection</h3>

Example: Proper Heading Outline

A well-structured page creates a logical outline:

h1: Introduction to Accessibility
 h2: What is Digital Accessibility?
 h3: Key Principles
 h3: Who Benefits
 h2: Legal Requirements
 h3: Section 508
 h3: ADA Title II
 h2: Getting Started
 h3: Quick Wins
 h3: Next Steps

This outline makes sense even without the content between headings. That's the test of good structure.

Headings in Different Applications

Microsoft Word

1. Select your heading text
2. Go to theHometab
3. In theStylesgallery, clickHeading 1,Heading 2, etc.
4. Use the Navigation Pane (View Navigation Pane) to see your document outline

Google Docs

1. Select your heading text
2. ClickFormat Paragraph styles Heading 1/2/3
3. Or use the styles dropdown in the toolbar (shows "Normal text")
4. View outline: View Show document outline

PowerPoint

• Each slide should have a unique title
• Use the built-in slide layouts—the title placeholder becomes the heading
• Don't create titles by adding text boxes—use the title placeholder

Web/HTML

<h1>Page Title</h1>
<h2>Main Section</h2>
<p>Content...</p>
<h3>Subsection</h3>
<p>More content...</p>

Brightspace HTML Editor

1. Select your text
2. Click theFormatdropdown
3. ChooseHeading 2,Heading 3, etc.
4. Note: Don't use Heading 1—Brightspace adds that automatically from the page title

Testing Heading Structure

Web Pages

• WAVE extension:Shows heading outline in the sidebar
• HeadingsMap extension:Chrome/Firefox extension for heading outlines
• Screen reader:Press H to navigate headings, or open headings list

Documents

• Word:View Navigation Pane shows heading structure
• Google Docs:View Show document outline
• Acrobat:View Show/Hide Navigation Panes Tags

What to Look For

1. Is there exactly one H1?
2. Are headings in logical order (no skipped levels)?
3. Does the outline make sense on its own?
4. Are all visual headings using proper heading elements?

Heading Checklist

• Page has exactly one H1
• Headings don't skip levels (H2 H3, not H2 H4)
• All section titles use real heading elements
• Heading text is descriptive and unique
• Heading outline makes sense without surrounding content
• Headings aren't used just for visual styling
• Navigation Pane/outline tool shows correct structure

Related Resources

• Microsoft Word Accessibility
• Google Docs Accessibility
• Writing Meaningful Link Text
• Content Creator Guide