HTML heading tags, <h1> through <h6>, define the headings and subheadings of your content. They create a hierarchical document outline that tells browsers, search engines, and assistive technologies how your page is structured. Think of them like chapter titles and section titles in a book: the H1 is the book title, H2s are chapter titles, H3s are sections within chapters, and so on.
Understanding the Heading Hierarchy
Each heading level represents a different depth in the page structure:
<h1>: The main heading of the page. It describes what the entire page is about. Best practice is to use exactly one H1 per page. On a blog post, this is typically the post title. On a homepage, it might be the main value proposition.<h2>: Major section headings. These divide your content into its primary sections. In a long article, each H2 introduces a new topic or major point.<h3>: Subsections within an H2 section. If your H2 section covers "Security Headers" and you want to break that into parts, each part gets an H3.<h4>through<h6>: Deeper nesting levels. Most content rarely needs anything beyond H4. Using H5 or H6 usually signals that the content might benefit from being restructured into separate pages or sections.
Why Heading Hierarchy Matters for SEO
Search engines use headings to understand the topic and structure of your content. Google has confirmed that headings help its crawlers grasp what each section of a page is about. While headings alone are not a massive ranking factor, they contribute to overall on-page SEO in several ways:
- Topic signals: Keywords in headings carry more weight than keywords in body text. An H2 that says "How to Secure Your WordPress Login" tells Google that section is specifically about login security.
- Featured snippets: Google often pulls content from sections with clear headings for featured snippet results. A well-structured page with descriptive headings has a better chance of appearing in these prominent positions.
- Page structure understanding: A logical heading hierarchy helps Google understand the relationship between sections. If your H2 is "Performance Optimization" and your H3s are "Image Compression" and "Caching," Google understands these are subtopics of performance.
- Passage ranking: Google can rank individual passages from a page. Clear headings help Google identify where one passage ends and another begins.
Accessibility and Screen Reader Navigation
For users who rely on screen readers (like JAWS, NVDA, or VoiceOver), headings are one of the primary navigation tools. Screen reader users frequently press a shortcut key (typically "H") to jump from heading to heading, skimming the page structure the same way a sighted user scans visually. If your headings are missing, out of order, or used for visual styling rather than structure, screen reader users lose this ability to navigate efficiently. The Web Content Accessibility Guidelines (WCAG) specifically address heading structure. Success Criterion 1.3.1 requires that information and relationships conveyed through presentation be programmatically determinable. In practice, this means your heading levels should reflect the actual content hierarchy, not just look nice.
Common Heading Mistakes in WordPress
WordPress sites are particularly prone to heading problems because the heading structure is split between the theme and the content editor:
- Multiple H1 tags: This is the most common issue. Some themes output the site title as an H1 in the header and also wrap the page/post title in an H1. That gives the page two competing main headings. While Google has said multiple H1s are "fine" in terms of not being a penalty, a single H1 that clearly states the page topic is still the cleanest approach.
- Skipping heading levels: Jumping from H2 directly to H4, skipping H3 entirely. This breaks the logical outline. Screen readers announce heading levels, so a user hearing "Heading level 2" followed by "Heading level 4" will wonder what happened to level 3.
- Using headings for styling: Choosing an H3 instead of an H2 because the H3 font size looks better in the theme. This is a misuse of headings. The correct approach is to use the right heading level for the structure and then adjust the CSS to get the visual appearance you want.
- No H1 at all: Some themes or page builder layouts accidentally omit the H1 entirely, or the H1 is set to the site title in the header while the actual page content starts at H2. Every page should have exactly one H1 that describes its main topic.
- Headings inside widgets and sidebars: WordPress widgets often output H2 or H3 headings for widget titles. These headings are not part of the main content hierarchy and can confuse the document outline. Some themes handle this with
aria-attributes, but many do not. - Empty heading tags: Sometimes themes or page builders leave empty heading tags in the markup (an
<h2>with no text). These are invisible to sighted users but confuse screen readers.
How WordPress Handles Headings
In a typical WordPress setup, the heading structure works like this: the theme generates the H1, usually from the post title or page title. The content you write in the editor should start with H2 headings for major sections and use H3 and below for subsections. You should almost never type an H1 inside the content editor, because the theme already outputs one. If you are using a page builder or a custom landing page where the theme does not output an H1, then you do need to add one yourself. Before publishing any page, it is worth checking whether the theme outputs an H1 automatically, so you avoid duplicates.
Headings in the Gutenberg Block Editor
Gutenberg makes it easy to insert and manage headings. The Heading block lets you choose the level (H2 through H6, and H1 if needed) from a dropdown. Gutenberg also includes a "Document Outline" feature in the editor sidebar that shows you the full heading structure of your post at a glance. If you skip a heading level, the outline view will flag it with a warning. This is a helpful built-in tool that many WordPress users overlook. Get in the habit of checking the document outline before hitting Publish.
Tools to Check and Visualize Heading Structure
Beyond Gutenberg's built-in outline, there are several ways to audit your heading structure:
- Browser extensions: The "HeadingsMap" extension (available for Chrome and Firefox) shows the heading hierarchy of any page as a collapsible tree. The "WAVE" accessibility tool also highlights heading issues.
- SEO plugins: Yoast SEO and Rank Math both check heading structure as part of their content analysis. They will warn you about missing H1s or suboptimal heading use.
- Online validators: The W3C Markup Validation Service checks your HTML for structural issues, including heading order problems.
- InspectWP: InspectWP scans your page and lists every heading in order, making it easy to spot the full hierarchy at a glance.
Best Practices for WordPress Headings
- One H1 per page: Let the theme handle the H1 from the post/page title. Do not add another one in the content.
- Start content at H2: Your first heading inside the editor should be H2, not H1.
- Do not skip levels: Go H2, then H3, then H4. Never jump from H2 to H4.
- Use headings for structure, not styling: If you want smaller or larger text, use CSS classes instead of changing the heading level.
- Keep headings descriptive: "Security" is less useful than "WordPress Security Best Practices" for both readers and search engines.
- Check the document outline: Use Gutenberg's built-in outline or a browser extension before publishing.
What InspectWP Checks
InspectWP analyzes the heading structure of your WordPress page and lists every heading in order, from H1 through H6. It detects missing H1 tags, multiple H1 tags, skipped heading levels, and empty headings. This gives you a clear picture of your page's document outline and helps you fix structural problems that affect both SEO and accessibility.