Heading Hierarchy: How to Structure Web Content Clearly

What heading hierarchy means

A heading hierarchy represents the organization of a document. The page title introduces the primary subject. Major sections divide that subject into its main parts. Subsections organize supporting ideas beneath the appropriate section.

The relationship is similar to an outline:

• The <h1> identifies the page’s main subject.
• Each <h2> introduces a major section of that subject.
• An <h3> introduces a subsection within an <h2> section.
• An <h4> divides an <h3> subsection when another level is genuinely needed.

This structure makes relationships visible. An <h3> does not merely follow an <h2>; it belongs within the section introduced by that <h2>.

Headings organize ideas, not isolated blocks of text

A heading should name the content that follows it. If the paragraphs beneath a heading no longer address that heading’s subject, the content may need a new section, a more accurate heading, or a different position in the document.

This is one reason heading decisions are often editorial decisions. A heading hierarchy reveals whether the page itself has been organized coherently.

How <h1> through <h6> work

HTML provides six heading levels. The numbers describe structural depth rather than visual importance or preferred font size.

<h1>: the main page heading

The <h1> normally identifies the primary subject of the page. For most articles and conventional web pages, one clear <h1> creates the simplest and most predictable structure.

HTML can technically contain more than one <h1>, but technical permission does not always produce the clearest document. A single primary heading is generally easier for authors, readers, and assistive technology users to interpret consistently.

<h2>: major sections

An <h2> introduces one of the main divisions beneath the page title. On a long article, the collection of <h2> headings should provide a useful summary of the article’s overall path.

<h3> through <h6>: nested subsections

Lower heading levels describe increasingly specific subdivisions. They should be used only when the content contains that level of nesting.

For example:

<h1>Guide to Maintaining a Home</h1>

<h2>Exterior Maintenance</h2>

<h3>Roof Inspections</h3>
<h3>Gutter Cleaning</h3>

<h2>Interior Maintenance</h2>

<h3>Plumbing Checks</h3>
<h3>Electrical Safety</h3>

“Roof Inspections” and “Gutter Cleaning” are both parts of “Exterior Maintenance.” When the document moves to “Interior Maintenance,” it returns to the <h2> level because a new major section has begun.

Most pages do not need all six levels

The availability of six heading levels does not mean every page should use them. Many well-structured pages need only an <h1>, several <h2> headings, and a few <h3> subsections.

Deep nesting can become difficult to follow. If a page regularly reaches <h5> or <h6>, consider whether some material would be clearer as a separate page or within a different content structure.

Semantic structure is different from visual appearance

A heading level should be chosen because of the section’s place in the document—not because the browser’s default styling happens to look appropriate.

Using an <h4> because it appears smaller than an <h2> confuses structure with presentation. Conversely, using ordinary bold text as a section title may create a visual heading without giving the content a programmatically identifiable heading.

Use HTML to describe meaning

HTML should identify the role of the content:

<h2>Preparing the Work Area</h2>

This communicates that the text begins a major section.

Use CSS to control presentation

CSS can control the heading’s size, weight, spacing, line height, color, and other visual properties. A site can make an <h2> visually modest without changing its semantic role.

This separation is a foundation of semantic HTML: structure carries meaning, while presentation controls appearance.

Heading hierarchy and accessibility

Headings provide more than visual landmarks. Many screen readers allow users to navigate directly between headings or open a list of the headings on a page. This can provide a fast understanding of the document and a practical way to reach a relevant section.

A useful heading structure helps people:

• scan the page without reading it line by line;
• understand which ideas are primary and which are subordinate;
• move between major sections using assistive technology;
• return to a section after following a link or reference;
• maintain orientation within long or complex content.

Visual headings should also be semantic headings

A line of large, bold text may look like a heading to a sighted reader. If it is marked up as a generic <div> or <p>, however, software may not recognize it as a heading.

<!-- Visual emphasis without heading semantics -->
<p class="large-bold-text">Safety Considerations</p>

<!-- A structural heading that can also be styled -->
<h2>Safety Considerations</h2>

Native heading elements generally provide the clearest and most durable solution. ARIA can describe roles in specialized interfaces, but it should not replace straightforward HTML when an appropriate native element is available.

WCAG and meaningful headings

The Web Content Accessibility Guidelines address both programmatically understandable structure and headings that describe the topic or purpose of the content they introduce. A heading such as “Important Information” may be grammatically valid but too vague to help someone understand what the section contains.

For broader context, see Understanding WCAG. Accessibility is strongest when it is treated as part of content structure rather than as a decorative compliance layer.

How to plan a heading hierarchy

A reliable heading structure often begins before the page is written in full. Planning the headings as an outline can reveal missing relationships, repeated ideas, and sections that have grown too broad.

1. State the page’s primary subject

Write an <h1> that accurately identifies what the page is about. It should be specific enough to establish scope without trying to summarize every supporting detail.

2. Identify the major sections

List the main questions, stages, concepts, or categories needed to explain the subject. These will often become the <h2> headings.

3. Group supporting ideas beneath their parent sections

If a major section contains distinct supporting topics, organize them as <h3> subsections. Ask whether each subsection genuinely belongs beneath its parent heading.

4. Read the headings by themselves

Temporarily ignore the paragraphs and review only the headings. The resulting outline should make sense on its own. It does not need to contain every detail, but it should reveal the page’s subject, major divisions, and progression.

5. Review hierarchy after editing

Pages often change during drafting. A short section may become a major topic, or several subsections may be combined. Recheck the headings after substantive edits so the hierarchy continues to represent the content accurately.

Headings can support page navigation

On longer pages, major headings can receive stable id attributes and become destinations for a table of contents or other internal links. This creates a direct relationship between document structure and navigation design.

<h2 id="inspection-process">Inspection Process</h2>

<a href="#inspection-process">Go to the inspection process</a>

Anchor links should lead to clearly named sections and remain stable when practical. They are useful navigation pathways, not merely technical additions.

Common heading hierarchy mistakes

Choosing headings because of their default size

An author may choose <h4> because it looks visually smaller than <h2>. This introduces a structural level that may not exist. Choose the correct level first, then use CSS to achieve the desired presentation.

Skipping levels while moving deeper

Moving from an <h2> directly to an <h4> suggests that an intermediate level is missing. In ordinary article content, sequential nesting is usually clearer:

<!-- Confusing nesting -->
<h2>Aircraft Inspection</h2>
<h4>Exterior Surfaces</h4>

<!-- Clearer nesting -->
<h2>Aircraft Inspection</h2>
<h3>Exterior Surfaces</h3>

Returning from a lower level to a higher level is different from skipping a level while moving deeper. An <h3> can be followed by an <h2> when the subsection has ended and a new major section begins.

Using bold paragraphs instead of headings

Bold text can create visual emphasis, but it does not establish a section in the document structure. If text introduces a distinct section, use the appropriate heading element.

Using headings for text that is not a section

Not every prominent phrase should be a heading. A callout, short label, price, quotation, or decorative statement may need another HTML element. Heading markup should indicate that a section of related content follows.

Writing vague or repetitive headings

Several headings named “Overview,” “Details,” or “More Information” provide little orientation. Descriptive headings help readers distinguish sections and understand what each one contains.

Creating empty headings

An empty heading may appear when a content block, template, or page builder inserts heading markup without meaningful text. Empty headings create unhelpful navigation stops and should be removed.

Letting reusable components disrupt the page outline

A component may contain a fixed heading level that works in one location but becomes incorrect elsewhere. Reusable components should account for their surrounding document context rather than assuming the same heading level is always appropriate.

Using too many headings

Headings should make content easier to understand, not fragment every paragraph into a separate section. A heading is useful when it names a meaningful group of content. Short labels or list items may be more appropriate for smaller units.

Heading hierarchy review checklist

Use the following questions when reviewing an article, landing page, guide, or reference document:

• Does the page have one clear primary heading?
• Do the <h2> headings represent the main sections?
• Does each lower-level heading belong beneath its parent section?
• Are heading levels based on structure rather than visual size?
• Have unnecessary jumps in heading level been removed?
• Do the headings accurately describe the content that follows?
• Can the page’s general organization be understood by reading only its headings?
• Are visual section titles marked up as actual headings?
• Are any headings empty, duplicated without purpose, or excessively vague?
• Does the hierarchy remain coherent on both short and long versions of the page?

Heading review also fits naturally within broader web standards quality assurance and content governance. Structure can deteriorate gradually as pages are revised, combined, or moved between templates.

Frequently asked questions

Can a web page have more than one <h1>?

HTML permits multiple <h1> elements, but one clear <h1> is generally the most understandable convention for an ordinary article or page. It establishes a predictable primary subject and reduces ambiguity across browsers, templates, and assistive technologies.

Is skipping a heading level always invalid HTML?

No. A skipped level is not automatically an HTML syntax error. However, moving from an <h2> to an <h4> often communicates an unclear relationship and may make navigation harder to understand. Sequential levels are usually the clearest choice when moving deeper into a section.

Can heading sizes be changed with CSS?

Yes. CSS should control visual properties such as size, weight, spacing, and color. The HTML heading level should continue to represent the heading’s structural place in the document.

Do headings help only screen reader users?

No. Headings help many people scan, understand, and navigate content. They also support editorial maintenance, browser features, internal anchor links, and software systems that interpret document structure.