In short. HTML heading structure uses h1 through h6 to express section relationships that readers and assistive technologies can identify.
Definition: HTML heading structure is the hierarchy of section headings expressed with the
h1throughh6elements. It identifies topics and their subsections in a document outline, the ordered collection of headings in a page.
Key facts
- The WHATWG HTML Standard assigns heading levels from element names:
h1marks a top-level section,h2a subsection, andh3a further subsection. - W3C's Headings tutorial recommends nesting headings by rank and avoiding skipped ranks when opening subsections.
- W3C's technique H42 explains that heading markup lets screen readers announce heading text and its level.
- W3C's draft Headings - Easy Checks asks reviewers to check for empty headings and text that visually resembles a heading but lacks heading markup.
How do heading levels organize a document?
As of 17 October 2026, the HTML Standard's outline rules require each successive heading level to be lower, equal, or at most one greater than the preceding level. Its conforming example includes this structure:
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
</section>
The standard also defines headingoffset, an attribute that adjusts descendant heading levels. The example above uses the default levels.
W3C's Headings tutorial distinguishes opening a subsection from closing one: moving from h2 directly to h4 skips a rank, while returning from h4 to h2 closes the preceding subsections and begins a new section.
What do headings provide for readers?
W3C's technique H42 describes headings as information that assistive technologies can identify in code. A screen reader can announce a heading's level and move between headings. The technique's hierarchical example places h3 headings for individual fruits beneath an h2 fruit section.
The Easy Checks draft explains that screen reader users can access a list of heading text and structure for a page overview. People with low vision use visual headings to understand topics before zooming in to read paragraphs. The same guidance calls for succinct headings that describe the text that follows.
How can a website's heading structure be checked?
W3C's draft Easy Checks procedure provides a “Check headings” bookmark. As documented on 17 October 2026, the procedure involves adding the link to the browser's bookmarks bar, opening the page under review, and activating the bookmark.
The review checks whether the heading list starts with an h1, whether levels are skipped, and whether heading text matches the following content. It also checks whether nested headings represent the content's structure.
Technique H42's test procedure adds a complementary check: actual content headings receive heading markup at the appropriate level, and other content avoids heading markup. This catches misuse in both directions, including text formatted to resemble a heading and ordinary text marked up as a heading.
Related terms
FAQ
Does every heading need a section wrapper?
The HTML Standard gives equivalent outlines with and without explicit section wrappers. You can express that hierarchy through the heading elements themselves.
Must every page region follow the content area's heading ranks?
W3C's Headings tutorial makes an exception for fixed sections such as sidebars. It recommends keeping their heading ranks consistent across pages when content-area ranks change.
Sources
- WHATWG, "HTML Standard: Sections", living standard accessed 17 October 2026
- W3C WAI, "Headings", updated 4 May 2017
- W3C WAI, "H42: Using h1-h6 to identify headings", updated 6 September 2026
- W3C WAI, "Headings - Easy Checks", draft updated 19 March 2024
Check how a page reads to answer engines. Open the GEO score analyzer