Headings

What Are Headings?

Headings are structured, hierarchical elements in HTML, ranging from <h1> to <h6>, that define the organization of content on a web page. They help users understand the structure and importance of information, and they play a key role in screen reader navigation and search engine optimization.

Example:

 

<h1>Main Article Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

 

Each level communicates the content hierarchy, making it easier for all users, including those using assistive technologies, to scan and navigate.

Why Headings Matter in Web Accessibility

Properly structured headings are fundamental to web accessibility and digital inclusion. They are essential for users who:

  • Use screen readers to jump between sections
  • Have cognitive disabilities and rely on clear content segmentation
  • Navigate using keyboard-only input

WCAG (Web Content Accessibility Guidelines) requires content to be structured and understandable (Guideline 1.3.1), and headings support this principle.

Legal references:

  • ADA (U.S.): Ensures content structure is accessible.
  • BFSG (Germany): Requires WCAG compliance for public websites.

How Headings Help Screen Reader Users

Screen readers (like NVDA or VoiceOver) allow users to jump between headings, a bit like flipping through the table of contents in a book. This allows for:

  • Skimming large pages efficiently
  • Finding relevant sections quickly
  • Understanding content flow

Without headings, or when heading levels are misused—users can get lost or frustrated.

Best Practices for Using Headings (TYPO3, WordPress, and Beyond)

TYPO3 Tips:

  • Use the correct content element styles (Text & Media, Header, etc.) and ensure they output semantic headings.
  • Editors can select heading levels in the backend (e.g., H2 for section titles).
  • Avoid skipping levels—don’t jump from H2 to H4.

WordPress Tips:

  • Use the block editor (Gutenberg) to assign proper headings.
  • Each post/page should have one H1 (usually the title), followed by logical H2, H3, etc.
  • Refrain from using headings just for styling—use CSS for visual formatting, not structural deception.

Common Mistakes & How to Fix Them

❌ Using headings for size only
 ✔️ Fix: Use headings for structure, not just appearance. Use CSS to style text if it’s not a true heading.

❌ Skipping heading levels (e.g., H1 → H3)
 ✔️ Fix: Maintain logical progression for consistency and usability.

❌ Using multiple H1 tags on a page
 ✔️ Fix: Each page should have one main H1, with content sections using lower levels.

❌ Leaving content without headings
 ✔️ Fix: Break long content into digestible, labeled sections with meaningful headers.

Explore related terms: Semantic HTML, Screen Reader, WCAG, Focus Indicator, Cognitive Disabilities

Key Takeaway

Headings aren’t just design tools, they’re accessibility anchors.
 A logical heading structure improves navigation, comprehension, and compliance. For every user, structured content means easier reading, better scanning, and smoother experiences.

Unsure About Your Heading Structure?

Run a heading-level audit with the T3AA Accessibility Analyzer or check your pages against our Semantic Heading Checklist.
Structure content with purpose. Lead your readers with clear, accessible headings.