Why heading structure matters for SEO and accessibility
Search engines and assistive technologies use heading tags to understand the hierarchical structure of a page. A well-structured document starts with a single `h1` that describes the page topic, followed by `h2` elements for major sections, `h3` for subsections, and so on. When headings skip levels (for example, jumping from `h2` to `h4`), the outline becomes ambiguous and both Google's crawler and screen readers lose the ability to infer the document's logical structure.
The HTML Heading Validator at /developer-tools/validators/heading-validator parses your HTML fragment, extracts all heading tags, and checks the hierarchy against best practices. It flags errors and warnings and renders an indented outline so you can see the structure at a glance.
What the validator checks
Missing `h1`: the document has no top-level heading. This is flagged as an error.
Multiple `h1`: more than one `h1` tag is found. Flagged as a warning because some frameworks use multiple `h1` per section, but it can dilute SEO focus.
Skipped levels: an `h2` is followed by an `h4` without an intervening `h3`. Flagged as a warning.
First heading not `h1`: the first heading in the document is `h2` or lower. Flagged as a warning.
Empty headings: an `h1` through `h6` tag with no text content. Flagged as an error.
Errors vs warnings explained
The validator distinguishes between errors and warnings so you can prioritize fixes. Errors represent clear problems: no `h1` means the page has no primary heading, and an empty heading tag is wasted markup that confuses both crawlers and screen readers. These should be fixed immediately.
Warnings are structural best-practice violations. Multiple `h1` tags, skipped levels, and a first heading that is not `h1` do not break the page but may reduce SEO effectiveness and accessibility quality. A skipped level from `h2` to `h4` is technically valid HTML, but it creates a gap in the outline that search engines may not interpret as intended.
The indented outline view
After parsing, the validator renders an indented tree view of your heading structure. Each heading is indented according to its level: `h1` at the root, `h2` indented one step, `h3` indented two steps, and so on. This visual representation makes it immediately obvious where the structure is broken. A skipped level appears as a jump in indentation (for example, `h2` followed by `h4` creates a visible double-indent), and missing levels show up as gaps in the hierarchy.
The outline also includes the text content of each heading, so you can verify that the heading text is descriptive and keyword-relevant, not generic like `Section 1` or `More`.
Common heading mistakes and how to fix them
Using a `div` with a large font instead of a heading tag: screen readers skip it entirely. Replace the `div` with the correct `h` element.
Styling headings with CSS classes that override the visual hierarchy: an `h3` styled to look bigger than the `h2` misleads sighted users and creates a mismatch between visual and semantic structure.
Skipping `h2` and going straight to `h3`: this happens when a designer creates sub-sections without a parent section. Add an `h2` to group the `h3` elements.
Empty heading tags left by templates: remove the empty tag or populate it with descriptive text.
For editing the raw HTML, /blog/html-entities can help with encoding, /blog/html-to-markdown can convert HTML to Markdown, and /blog/markdown-preview lets you preview Markdown that may contain headings.
Step-by-step: validating your headings
Paste your HTML fragment (the `<body>` content or a section of the page) into the input area.
Click Validate headings.
Review the issues list: errors in red, warnings in yellow.
Examine the indented outline to see the visual structure.
Fix the issues in your source code and re-validate.
The validator works on static HTML. For dynamically rendered pages, view the page source in your browser and paste that HTML. For XML-related validation, /blog/xml-formatter can help format and inspect XML documents.
Heading levels and SEO best practices
Google's documentation recommends using headings to convey the document's structure, similar to an outline. The recommended pattern is one `h1` per page (the page title), `h2` for major sections, `h3` for subsections within those sections, and so on. Each level should be used sequentially without skipping. Headings should contain relevant keywords naturally, not stuffed unnaturally.
While Google has stated that heading levels are not a direct ranking factor, a well-structured heading hierarchy improves crawlability, helps Google understand the relationships between sections, and provides a better user experience. For accessibility, heading structure is even more critical: screen reader users navigate pages by heading level, and a broken hierarchy makes navigation confusing or impossible.
Privacy: client-side parsing only
Your HTML may contain proprietary content, unpublished drafts, or sensitive business logic. Keeping validation client-side ensures none of that information leaves your device. Visit /about for more details.
Frequently asked questions
Q: Why does heading order matter for SEO?
A: Search engines use heading structure to understand page hierarchy. A single h1, then h2s for sections, h3s for subsections, with no skipped levels, is the recommended pattern.
Q: What is flagged as an error vs warning?
A: Errors: no h1, empty heading text. Warnings: multiple h1s, skipped levels, first heading not h1.
Q: Does it handle dynamic content?
A: No. It parses the HTML you paste. For dynamic pages, view source and paste that.
Q: Is my HTML uploaded?
A: No. Validation happens entirely in your browser.
