Category: ARIA and Semantic Structure

Heading Structure

Also known as: Heading Hierarchy, Document Headings, Heading Levels

Simply put

Heading structure is the way headings and subheadings are used to organize the content of a web page or document, much like the outline of an essay or a table of contents. A main heading introduces the overall topic, and subheadings break the content into sections and smaller details, helping all users understand how information is organized.

Formal definition

Heading structure refers to the semantic use of ranked heading elements (in HTML, the <h1> through <h6> elements, where <h1> is the highest level and <h6> the lowest) to convey the hierarchical organization of a page or document. Headings should be nested by rank so that the most important heading is rank 1 and subordinate sections use progressively lower ranks, forming a logical outline. Properly coded headings expose this structure programmatically, enabling assistive technologies such as screen readers to navigate content by heading level. Note that visually styling text to look like a heading, without using the appropriate semantic markup, does not create accessible heading structure.

Why it matters

Heading structure is one of the primary ways assistive technology users navigate content. Screen readers commonly allow users to jump directly from heading to heading, or to a specific heading level, effectively using the heading outline as a table of contents. When headings are properly ranked and nested, this navigation reflects the true organization of the page; when they are missing, skipped, or applied only as visual styling, that navigational map breaks down and users may be forced to read or tab through content linearly to find what they need.

A logical heading hierarchy also benefits users who do not rely on assistive technology. Clear headings and subheadings help all readers scan a page, understand how sections relate, and locate relevant information more quickly. Because visually styling text to look like a heading does not create the underlying semantic structure, content that appears well-organized to a sighted user can still be effectively unstructured for someone using a screen reader.

Heading structure relates to established accessibility guidance on information relationships and navigability, and it is commonly evaluated in accessibility reviews. This entry describes the general purpose and mechanics of heading structure and is not legal advice; specific conformance obligations depend on the standards, regulations, and jurisdiction that apply to a given organization, and readers should consult qualified counsel or current agency guidance for compliance questions.

Who it's relevant to

Content authors and editors

People who write and structure web content are responsible for applying heading levels meaningfully rather than choosing them for visual size. Using the built-in heading styles in a content management system or document editor, and nesting them by rank, helps ensure the underlying outline matches the visible organization.

Front-end developers

Developers implement the semantic markup that exposes heading structure to assistive technology. This includes using the correct <h1> through <h6> elements, avoiding heading-like styling on non-heading elements, and confirming that the coded hierarchy reflects the intended document outline.

UX and visual designers

Designers establish the visual hierarchy that authors and developers translate into semantic headings. Designing distinct, consistent heading levels helps ensure that the visual structure can be mapped cleanly onto a logical, programmatically determinable heading outline.

Accessibility testers and QA teams

Those reviewing content for accessibility commonly evaluate whether headings are present, correctly ranked, and logically nested. Because automated tools detect only a portion of issues, manual review and testing with screen readers are generally needed to confirm that heading navigation works as intended.

Screen reader and assistive technology users

Users who navigate by headings rely on a well-formed hierarchy to move efficiently through a page and understand how its sections relate. Missing, skipped, or visually-only headings directly reduce their ability to locate and comprehend content.

Inside Heading Structure

Heading Elements (h1-h6)

The HTML heading elements ranging from h1 (highest level) to h6 (lowest level) that define the hierarchical outline of a page's content. They convey the relative importance and nesting of sections to both sighted users and assistive technology.

Logical Hierarchy

The ordered nesting of headings so that levels descend in a meaningful sequence without skipping levels (for example, an h2 followed by an h3 rather than an h4). This structure communicates the relationships between sections and subsections.

Programmatic Semantics

The requirement that headings be marked up with true heading elements or appropriate roles rather than styled text (such as bold or enlarged font), so that assistive technologies can recognize and expose them as headings.

Assistive Technology Navigation

Screen readers and other tools allow users to list and jump between headings to navigate a page efficiently. Well-structured headings provide a navigable outline that supports this behavior.

Relationship to WCAG Success Criteria

Heading structure relates to success criteria addressing information and relationships being conveyed programmatically, as well as criteria concerning descriptive headings and labels. These are commonly cited when evaluating heading markup against WCAG.

Common questions

Answers to the questions practitioners most commonly ask about Heading Structure.

Does using large or bold text create a proper heading?

No. Visually styling text to look large or bold does not make it a heading in a way that assistive technology can recognize. A proper heading must be marked up with semantic HTML heading elements (h1 through h6) or an equivalent role, so that screen readers can identify it, announce it as a heading, and allow users to navigate by heading. Text that only appears heading-like visually is generally treated as ordinary text by assistive technology.

Do I have to use headings in strict sequential order without ever skipping a level?

A logical, hierarchical structure is generally recommended, and skipping heading levels (for example jumping from h2 to h4) can create confusion for users navigating by heading. However, the relevant WCAG success criteria focus on programmatically conveyed structure and meaningful sequence rather than prohibiting every skipped level outright. A well-nested, consistent hierarchy is best practice, but it is worth distinguishing what is required by a specific success criterion from what is recommended for usability.

How many h1 elements should a page have?

A common practice is to use a single h1 that describes the main topic of the page, with subsequent sections nested under lower-level headings. Some document structures and HTML sectioning approaches may support more than one h1, but a single, clear top-level heading is often easier for users to interpret. The priority is a consistent, logical hierarchy that communicates the page's organization.

How can I check whether my heading structure is correct?

Automated tools can detect some issues, such as empty headings or skipped levels, but they detect only a portion of problems and cannot confirm that headings are meaningful or correctly ordered. Reviewing the heading outline, navigating by heading with a screen reader, and confirming that each heading accurately labels its section are important manual checks. Combining automated, manual, and assistive technology testing generally gives the most reliable picture.

Should I use headings for content other than section titles, such as sidebars or navigation labels?

Headings are intended to label sections of content and establish document structure, so they can be appropriate for identifying distinct regions like a sidebar or a group of related links. They should be used to convey genuine structure rather than for visual styling alone. Where a construct is more of a landmark region than a titled section, ARIA landmark roles may complement headings, but headings should still accurately reflect the content they introduce.

What is the relationship between heading structure and the visual appearance of headings?

The semantic heading level (the markup) and the visual styling can be managed independently, typically using CSS to control size and weight. This means you can choose the correct semantic level for structure while styling it to fit the visual design. The heading element should be selected based on its place in the document hierarchy, not based on how large or small you want the text to appear.

Common misconceptions

Text that merely looks like a heading (large or bold font) functions as a heading for accessibility purposes.

Visual styling alone does not convey heading semantics to assistive technology. Content must use actual heading markup or appropriate roles so that screen readers can identify and navigate by headings.

Automated testing tools can fully verify that heading structure is accessible.

Automated checks can detect some issues, such as skipped levels or missing headings, but they cannot reliably judge whether headings are meaningful or logically organized. Manual review and testing with assistive technology are generally needed.

A page must contain exactly one h1 to be accessible.

While a single top-level heading is a common and often recommended practice for a clear page outline, WCAG does not impose a rigid rule dictating a specific count. The key requirement is a logical, programmatically conveyed hierarchy that supports navigation and understanding.

Best practices

Use true HTML heading elements (h1-h6) or appropriate roles to mark up headings, rather than relying on visual styling such as bold or enlarged text.

Maintain a logical, descending hierarchy and avoid skipping heading levels, so the document outline accurately reflects the content structure.

Write descriptive headings that clearly indicate the topic or purpose of the section they introduce.

Test heading structure with screen readers and heading-navigation features, since automated tools detect only a portion of potential issues.

Combine automated scanning with manual review to confirm that headings are both correctly coded and meaningfully organized.

Treat conformance with heading-related WCAG success criteria as a benchmark rather than a guarantee of an accessible experience or legal compliance, and consult qualified counsel for jurisdiction-specific requirements.