Header Tags for SEO: How to Structure H1, H2 and H3

First, Test the Outline Without Reading the Paragraphs

Imagine an article helping a small business choose a website navigation structure. It might use the following headings:

<h1>How to Plan Website Navigation</h1>
<h2>Identify the Pages Visitors Need</h2>
<h3>Group Related Pages</h3>
<h3>Separate Main Navigation from Footer Links</h3>
<h2>Check the Navigation on Mobile</h2>
<h3>Test Labels and Menu Behaviour</h3>
<h2>Review the Finished Structure</h2>

The example has one main heading, three major sections and narrower subsections beneath the parts they belong to. A visitor who jumps from one H2 to the next can follow the process without reading every sentence. The H3 headings offer useful stopping points inside two of those sections.

Now suppose ‘Group Related Pages’ were marked as H2 instead. It would appear to be a major section alongside ‘Identify the Pages Visitors Need’, rather than a task within it. The words have not changed, but their relationship has. That is the kind of problem heading hierarchy is meant to prevent.

There is no requirement to use H3 just to make an outline look complete. If the first section contained only one short paragraph, its H2 might be sufficient. Start with the content’s real divisions, then choose the level.

What H1 to H6 Mean in HTML

The HTML Standard defines six heading elements. They establish a hierarchy of headings within a document, from H1 at the highest level to H6 at the lowest. They are not six font-size settings, although a browser or theme may give them different default appearances.

The phrase ‘header tags’ is common in SEO, but ‘heading elements’ is the precise HTML term. The <header> element has a different job: it represents introductory content for a page or section. A <header> is not another spelling of <h1>.

A Large Line of Text Is Not Necessarily a Heading

A paragraph can be large, bold or centred without beginning a new section. Likewise, an H2 might look small because of the site’s CSS. What matters is the HTML element and what the text introduces. When a design needs emphasis without a new subsection, use appropriate text styling rather than changing a paragraph into a heading merely for its appearance.

For writers working on an outline rather than its markup, MOCOBIN’s SEO-friendly content guide covers how to decide which ideas deserve sections in the first place. This page picks up at the point where those editorial divisions need meaningful HTML levels.

Google Search and Accessibility Do Not Use the Same Checklist

It is easy to turn a sound accessibility recommendation into a supposed SEO rule. Heading order is a good example of why those should be kept separate.

What Google Actually Says

Google’s SEO Starter Guide says there is no ideal number of headings for a page. It also says that headings appearing out of semantic order do not matter from a Google Search perspective. That does not make headings pointless. It means an H2 followed by an H4 is not, by itself, evidence of a Google ranking penalty or an indexing problem.

Google’s title link documentation gives headings another, narrower role. Google may use prominent headings and other visible text as sources when generating a search-result title link. A clear main heading, distinct from competing large titles, therefore helps communicate which text represents the page. It does not guarantee that Google will show the H1 verbatim.

Why Accessibility Guidance Still Prefers a Logical Order

The W3C Web Accessibility Initiative explains that heading levels help people navigate a page, including through assistive technologies. It recommends nesting headings by rank and avoiding skipped levels where possible. An H2 followed immediately by an H4 can imply that an H3-level section is missing, even if the visual design seems perfectly tidy.

Moving from an H4 back to an H2 is different: that can simply close a detailed subsection and start the next major section. The point is to represent the document’s relationships, not enforce a mechanical sequence of numbers. In a sidebar or other fixed page region, a heading’s level may also follow the structure of that region rather than the nearest article paragraph.

Is One H1 Mandatory?

No. Google does not require exactly one H1 for ranking. For a conventional article, however, one clear main H1 is usually the simplest editorial arrangement. Multiple equally prominent page titles can make the main subject less obvious. Before removing a second H1, check whether it is part of the article, a theme-generated title or a separate page region, and whether changing it improves the actual experience.

The visible H1 and the HTML <title> element have different roles. The first labels the page in its content; the second provides a document title used by browsers and as a potential source for the search-result title link. Their wording should agree about the subject, but need not match exactly. The meta descriptions guide covers the separate task of writing the accompanying search-result description.

Write Headings That Identify the Next Section

The heading level tells readers where a section sits. Its wording tells them whether that section is worth opening or reading. Both matter, but neither requires repeating the target keyword at every opportunity.

Compare these outlines for an article about fixing a slow website:

The revised labels describe different tasks. Readers can decide which one they need. That is more useful than making every H2 resemble a target search phrase. It also reveals when two sections have become repetitive: if their headings promise the same result, the body may need combining.

Keywords belong where they accurately name a subject. If an exact phrase reads awkwardly in a heading, do not force it. The related question of where search terms should appear prominently is covered in MOCOBIN’s keyword prominence and proximity guide. Here, clarity of the section label takes priority.

Check the WordPress Editor and the Rendered Page

WordPress makes heading levels straightforward to set, but the editor is only part of the page. A theme, reusable component, table of contents or page-builder block may contribute headings outside the text you typed. A clean-looking draft is not proof of a clean rendered outline.

1. Check the page title first. Preview the page and identify its main visible heading. Many themes output the WordPress post title as an H1 automatically; other templates handle it differently. If the template already supplies the article H1, do not add another body H1 just to meet a checklist.
2. Use Heading blocks for actual sections. In the block editor, select a Heading block and choose the level that reflects its place in the document. The official WordPress Heading block documentation also describes the Document Overview’s Outline view, which helps expose the heading sequence while editing.
3. Read the headings without the body. The H2s should identify the main parts of the task. An H3 should clearly belong to the preceding H2. If an H3 has grown into a separate major subject, it may need an H2 or a different position in the article.
4. Inspect the preview or published HTML. Check that the expected <h1>, <h2> and <h3> elements are present after the theme and blocks render. Inspect unexpected title blocks, FAQ headings and template components rather than relying on font size or a plugin’s summary alone.
5. Fix the issue, not just the warning. Rename vague headings, correct a misleading level or remove styling-only headings when they cause a real structural problem. A scanner reporting two H1s does not establish that the page is ranked poorly because of them.

When the content includes a custom block or a page-builder component, avoid blindly editing its saved HTML to change a heading level. Check the block’s controls and rendered result first. A structural improvement that breaks a reusable component or its accessibility attributes is not an improvement.