How to Structure Heading Tags (H1–H6)

Proper heading structure helps screen-reader users navigate content, improves SEO, and is required under the Title II digital accessibility standards. Headings must communicate meaning and hierarchy, not just visual styling.

Why headings matter

• Screen readers use headings as a page outline for fast navigation
• Assistive technology expects headings to follow a logical order
• Search engines rely on headings to understand page topics
• Skipping or misusing headings creates accessibility barriers

Heading hierarchy rules

Think of headings as an outline, not formatting.

H1: Page title

The H1 is the most important heading on the page and represents the primary topic of the content. Every page must have exactly one H1, and it should clearly describe what the page is about.

Example:

H1: Get Expert Quotes on Climate Change

H2: Major sections

H2 headings divide the page into its main sections and directly support the H1. A page may include multiple H2s, each representing a distinct topic or section of content. H2s help users, including those using assistive technology, understand the overall structure of the page at a glance.

Example:

• H2: Experts Available for Interviews
• H2: Media Information

H3–H6: Subsections

Headings from H3 through H6 are used to further organize content within an H2 section. These headings should follow a logical, nested order, similar to an outline. Each level provides additional detail and should only be used if it directly supports the level above it. Skipping heading levels (for example, jumping from H2 to H4) breaks the structural hierarchy and should be avoided.

Example Structure:

• H2: Experts Available for Interviews
  • H3: Local (Long Island) Impact
    • H4: John Doe, School of Marine and Atmospheric Sciences
  • H3: Global Impact
    • H4: Jane Doe, School of Marine and Atmospheric Sciences

What to Avoid

Avoid skipping heading levels, such as jumping from an H2 directly to an H4, as this breaks the logical structure assistive technologies rely on. Headings should never be used purely for visual emphasis, and pages should not contain more than one H1. Do not rely on font size, bold text, or visual styling alone to imply structure—headings must communicate hierarchy through proper HTML semantics.

Using headings in Modern Campus CMS

Modern Campus components allow editors to change the underlying heading level without altering the visual appearance of the text. This makes it possible to preserve design consistency while ensuring the page structure remains accessible and semantically correct.

This matters because it allows visual styling to remain consistent across the site while keeping semantic HTML accurate. Proper heading markup supports screen readers and other assistive technologies without requiring design workarounds or manual formatting tricks.

As a best practice, choose heading levels based on the meaning and hierarchy of the content rather than how the text looks on the page. Use component settings to select the appropriate H-tag instead of applying bold text or manual styling, and avoid using snippets or WYSIWYG formatting to simulate headings.

Accessibility Benefits

Under the updated federal Title II requirements, all pages must use semantic HTML headings arranged in a logical and hierarchical order. Improper heading usage can create accessibility barriers and may result in compliance failures. These requirements apply to all public-facing web content, including archived and low-traffic pages.

Easy Auditing Tip

Browser tools such as SEO Meta in 1 Click or the Conductor extension can display a page’s heading outline, making it easy to review structure and identify issues before publishing.

Demo Heading Structure

• H1: Get Expert Quotes on Climate Change
  • H2: Experts Available for Interviews
    • H3: Local (Long Island) Impact
      • H4: John Doe, School of Marine and Atmospheric Sciences
    • H3: Global Impact
      • H4: Jane Doe, School of Marine and Atmospheric Sciences
  • H2: Media Clips
  • H2: Contacts for Journalists
    • H3: Media Contacts

Correct heading structure is one of the simplest ways to improve accessibility, usability, and search visibility at the same time.