Heading Structure and Document Outline - Compliant Examples

The following examples demonstrate proper heading structure and document outline:

Single h1 Per Page

Proper Heading Hierarchy (h1 → h2 → h3 → h4)

Headings should follow a logical hierarchy: h1 → h2 → h3 → h4 → h5 → h6. Never skip heading levels (e.g., don't go from h2 to h4).

Complete Document Outline Example

This example shows a complete, properly structured document outline using semantic HTML5 elements (<article>, <section>) with proper heading hierarchy.

Heading Structure for Navigation

Navigation sections can have a visually hidden h2 heading (using sr-only class) to provide structure for screen reader users without cluttering the visual design.

Headings in Forms

Forms can use headings to structure different sections. Visually hidden headings can supplement fieldsets and legends for better screen reader navigation.

Headings in Articles and Blog Posts

Articles should have a clear heading structure that allows readers to understand the content hierarchy and navigate efficiently.

Headings for Skip Navigation

The main content area should start with an h1 heading, allowing users who skip navigation to understand where they are.

Multiple Sections with Same-Level Headings

Multiple sections can have the same heading level (h2) when they are siblings at the same level in the document hierarchy.

Headings in Sidebars and Asides

Sidebars and asides should have their own heading structure. The heading level should be appropriate to the document structure (typically h2 if the main content starts with h1).

Headings for Error Messages and Status

Important messages and alerts can use headings to provide structure, but they should follow the document's heading hierarchy.

Best Practices for Heading Structure

• One h1 per page: Each page should have exactly one h1 that represents the main topic
• Don't skip levels: Always go from h1 → h2 → h3, never h1 → h3
• Use headings for structure, not styling: Use CSS for visual styling, not heading tags
• Be descriptive: Heading text should clearly describe the content that follows
• Maintain hierarchy: Subheadings should be one level lower than their parent
• Use semantic HTML5: Combine headings with <section>, <article>, <nav>, etc.
• Test with screen readers: Screen reader users navigate by headings, so test the heading structure
• Check document outline: Use tools to verify your document outline is logical
• Visually hidden headings: Use sr-only class for headings that provide structure but aren't visually needed
• Consistent structure: Maintain consistent heading patterns across similar pages

Document Outline Tools

You can test your heading structure using:

• Browser developer tools (Elements panel → Accessibility tree)
• Screen reader software (NVDA, JAWS, VoiceOver)
• Browser extensions (HeadingsMap, WAVE)
• Online validators (W3C HTML Validator)

These tools help verify that your heading structure creates a logical document outline that assistive technologies can navigate effectively.

Heading Structure Checklist

• ✓ Page has exactly one h1 element
• ✓ All headings follow logical hierarchy (no skipped levels)
• ✓ Heading levels match content hierarchy
• ✓ Headings are descriptive and meaningful
• ✓ Headings are used for structure, not styling
• ✓ Document outline is logical and navigable
• ✓ Screen reader users can navigate effectively by headings
• ✓ Semantic HTML5 elements are used appropriately