Headings communicate the structure of the page. They help everyone understand how content is organized and allow assistive technologies to provide quick navigation within a page.
Screen reader users can jump from heading to heading to find relevant sections, just like sighted users scan visually by looking at headings and subheadings. Using real HTML heading elements (for example, <h2> through <h6>) is essential for accessibility.
Heading ranks and semantic order
Headings are organized in levels, or “ranks.” The most important heading on the page is level 1 (<h1>), followed by level 2 (<h2>), and so on through level 6 (<h6>).
The page title is usually the single <h1> on the page (often controlled by the template).
Major sections of the page use <h2>.
Subsections under a major heading use <h3>, and so on.
Do not skip levels (for example, avoid going from <h2> directly to <h4>).
Heading levels can be confusing, so it is important to check that headings appear in a logical, semantic order. For example, make sure a <h2> is not immediately followed by a <h4> without a <h3> in between.
Headings and page layout
HTML headings are numbered from 1 to 6, with 1 being the highest and 6 the lowest. Together, they form an outline of the page.
The first visible heading in the main content should represent the page’s primary topic (usually <h1> or <h2> depending on the template).
Each <h2> begins a new major section of the page.
Each <h3> begins a subsection within that <h2> section.
Use headings to label groups of related text, lists, tables, and images so that users can quickly identify what each section covers.
Why headings matter for accessibility
Correctly structured headings help assistive technology users:
Recognize the different sections or topics on a page.
Understand how content is grouped and related.
Quickly navigate to a specific section using heading shortcuts.
Improve the overall usability and searchability of the page.
Proper headings support both accessibility and search engine optimization by making page structure clear to browsers, assistive technologies, and search engines.
Related WCAG 2.1 criteria
1.3.1 Info and Relationships (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
2.4.1 Bypass Blocks (Level A): Provide mechanisms to skip repeated blocks of content (such as using skip links and headings to move quickly to main sections).
2.4.6 Headings and Labels (Level AA): Headings and labels describe topic or purpose, helping users find content and understand the page structure.
Before you publish
Confirm that the page has a single, meaningful main heading for its primary topic.
Check that heading levels are in order (no jumps from <h2> to <h4>).
Make sure each major section has a clear heading that describes its content.
Ensure headings are not used only for visual styling; use true HTML heading elements, not just bold text.
Use a screen reader or browser extension to view the page’s heading outline and verify that it makes sense.