Heading Hierarchy in WordPress: H1-H6, Document Outline and Screen Readers

HTML headings (H1-H6) are the spine of the document. They form an invisible table of contents that screen readers and Google use to understand a page at a glance - just as a sighted reader skims headings to decide whether to keep reading.

Why this matters

Screen readers expose a shortcut to jump between headings (NVDA: H, JAWS: H, VoiceOver: Rotor > Headings). It is the primary navigation pattern for blind users on a new page: jump through headings, pick where to land. When the hierarchy is broken - skipping from H1 to H3 without H2, two H1s on the same page, an H4 appearing before the first H2 - the user gets a confused outline and may assume content is missing.

This is a international accessibility guidelines Level A requirement, 1.3.1 Info and Relationships. Beyond that, Google uses heading structure to interpret pages: H1 is the topic, H2s are sections, H3s are subsections. Featured snippets are sometimes derived from a clean heading outline. And sighted readers' UX depends on it - they scan headings to decide whether to dive in.

How to detect

Install the WAVE Evaluation Tool in Chrome - it draws the page structure with all headings in order. Common warnings: "Skipped heading level", "Multiple H1". Alternative: HeadingsMap, a Chrome/Firefox extension that shows the heading tree in one click. Or in Chrome's console:

[...document.querySelectorAll('h1,h2,h3,h4,h5,h6')].forEach(h => console.log(h.tagName, h.textContent.trim().slice(0,80)));

This logs every heading on the page in order. Skips become obvious.

How to fix

1. Exactly one H1 per page - usually the post title. If the theme renders the post title as H1 and you also add an H1 in the content, that is a duplicate. Demote to H2.
2. Gradual descent: H1 > H2 > H3 > H4. Never H1 > H3. If you want the visual size of H3 to be larger, fix it in CSS - do not promote it to H2.
3. In the block editor, select a heading block and pick Heading level (H2/H3/H4) from the toolbar.
4. Inspect the theme's Header and Footer - sometimes a stray H4 or H5 creates noise in the outline tree.
5. If the theme renders a sidebar title as H4 before the first H2 of the content, the outline is misleading. Edit the theme, or use the Site Editor (FSE) in WordPress 6.0+.
6. Test every page type: home, blog index, single post, archive, custom page. Each can look different.
7. Re-run HeadingsMap after fixing - the tree should look tidy.

Common mistakes

• Using H tags for visual size: "I want it bigger", so an H2 - wrong. Fix the styling of the correct H.
• Two H1s on the home page: a textual logo wrapped in H1 plus the page hero in H1 = two H1s. Demote the logo to a div or H2.
• Navigation menus using H3 per category: pollutes the outline. Use <nav> with a <ul> instead.
• Empty headings: <h2></h2> from a missed CSS load - WAVE flags as an error.
• Trusting page-builder defaults: Elementor/Divi widgets often default HTML tag to h3. Verify each.

Verifying the fix

Run HeadingsMap and check the tree - it should be clean. In WAVE the Headings category should show zero errors. In NVDA, press H repeatedly on the page - the jumps should make sense. RankPlus turns green.