Headings & Subheadings

Headings and subheadings create the structural skeleton of content. They serve three audiences: scanners who only read headings, screen reader users who navigate by heading level, and search engines that use headings to understand content structure.

stellae.design

Design Principles

Headings are the most-read text on any page. In scanning behavior, users read headings to decide which sections deserve their attention. Effective headings are mini-summaries — reading just the headings should communicate the page's key points.

Before/after examples: • Before: 'Overview' → After: 'Ship your first order in 3 steps' • Before: 'Features' → After: 'What you can do with Pro' • Before: 'Section 1' → After: 'Connect your payment method' • Before: 'Important Information' → After: 'Your data is encrypted and private'

Why It Matters

Headings and subheadings are the primary structural signposts that users rely on to navigate content, assess relevance, and decide whether to invest their attention — eye-tracking research consistently shows that users scan headings before committing to reading body content, making headings the single most important element in determining whether content gets read or skipped. Beyond readability, headings create a semantic hierarchy that communicates the relationship between content sections, allowing users to build a mental model of information architecture before engaging with details, which dramatically reduces the cognitive effort required to locate specific information within long documents or complex interfaces. For accessibility, headings are the primary navigation mechanism for screen reader users, who rely on heading levels to understand page structure and jump between sections — poorly structured headings do not merely look messy, they make content functionally inaccessible.

Real-World Examples

MDN Web Docs heading structure

MDN Web Docs uses a rigorous heading hierarchy where H1 identifies the documented API or concept, H2 headings mark major sections like Syntax, Parameters, and Examples, and H3 headings break down subsections within each major area. This consistent structure allows developers to land on any documentation page and immediately locate the section they need by scanning headings alone, without reading body text. The strict hierarchy also means screen reader users can navigate the same content structure that sighted users scan visually, creating equivalent access through semantic HTML.

GOV.UK content design standards

The UK Government Digital Service requires all content to use clear, descriptive headings that tell users exactly what each section contains, with strict adherence to heading hierarchy and a mandate that headings must make sense when read in sequence without body text. This standard emerged from extensive user research showing that citizens scanning government services for specific information make stay-or-leave decisions based entirely on heading content. The result is content that serves users under stress, with limited literacy, or using assistive technology as effectively as it serves confident, sighted readers.

Counter-example

Marketing page with decorative heading levels

A landing page uses H1 for the hero tagline, then jumps to H4 for section titles because the designer liked the smaller font size, skips H2 and H3 entirely, and uses H2 for a footer promotional callout because it needed to be visually prominent. Screen reader users navigating by heading level encounter a disorienting structure where the hierarchy suggests missing content sections, and the footer callout appears to be a major page section. The heading structure communicates an information architecture that does not match the actual content, confusing both assistive technology users and search engines.

Role-Specific Guidance

Common Mistakes

• The most widespread mistake is treating heading levels as visual styling tools rather than structural semantics — choosing an H3 because it is the right font size rather than because the content is a third-level subsection, which creates a heading hierarchy that visually looks fine but is structurally meaningless to screen readers and search engines. Another common error is writing vague or clever headings like 'The Journey Begins' instead of descriptive labels like 'Getting Started with Your Account,' forcing users to read body content to determine if a section is relevant to their needs rather than being able to assess relevance from the heading alone. Teams also frequently forget that headings are a navigation system, not just a formatting choice — in long content, headings are the mechanism by which users move through a page, and unclear or inconsistent headings are equivalent to removing signage from a building.