Heading Structure Checker
Validate HTML heading hierarchy for SEO and accessibility.
Summary
Issues
Structure Outline
What is a Good Heading Structure?
A heading structure is the outline formed by the h1 through h6 elements on a page. Because headings nest, they read as a table of contents: the h1 declares the single main topic, h2 elements mark the major sections beneath it, h3 elements mark subsections within those, and so on down to h6. A well-formed outline lets both people and machines understand how the content is organised before reading a single sentence.
Good structure matters for two audiences. Search engines use headings as a strong relevance signal, weighing the words inside an h1 far more heavily than body text because the heading is treated as a summary of the section below it. Assistive technology such as screen readers builds a navigable list from the headings, so a visitor who cannot see the page can still jump directly to the section they need. Broken structure therefore hurts ranking and accessibility at the same time.
This checker parses the HTML you paste using the browser's DOM parser and inspects every heading it finds. It counts how many of each level appear, verifies that exactly one h1 exists, and walks the sequence looking for gaps where one level was skipped, such as jumping straight from an h1 to an h3. It also flags empty headings, notes when the first heading is not an h1, and warns when no headings are present at all.
Each finding is graded as an error, a warning, or an informational note, and the overall status is derived from the most serious issue: any error yields a fail, warnings without errors yield a caution, and a clean outline yields a pass. A visual tree then reproduces the hierarchy with indentation, making the shape of the document immediately obvious. All of this happens in your browser, so nothing you paste is uploaded anywhere.
Key Concepts
- Heading hierarchy — the nested outline formed by h1 through h6, where each level sits logically beneath the one above it.
- Single h1 rule — a page should carry exactly one h1, which states its main topic.
- Skipped level — a gap such as h1 to h3 that breaks the reading order and is reported as a warning.
- Empty heading — a heading tag with no text, which conveys nothing and is flagged as a warning.
- Severity — each issue is an error, a warning, or an informational note, with errors deciding a fail.
- Outline tree — an indented visual rendering of every heading in document order.
How to Use
- Paste your HTML — Drop the markup containing your headings into the text area, or load one of the built-in examples with the Valid Example and Invalid Example links.
- Check the structure — Press Check Structure. Analysis also runs automatically as you type, so results refresh without a click.
- Read the summary — The summary cards show the PASS, WARN, or FAIL status, the total heading count, and the tally of errors and warnings.
- Review the issues — Each problem is listed with its severity and the offending tag, such as a second h1, an h1-to-h3 jump, or an empty heading.
- Study the outline — The structure tree indents every heading by level so you can see the hierarchy at a glance and spot gaps visually.
Heading Level Reference
Each heading level has a distinct role in the document outline. The table below summarises what every level is for and the rule the checker enforces on it, and the second table lists the issue types the tool can report.
| Level | Purpose | Rule |
|---|---|---|
| h1 | Page main topic | Exactly one per page |
| h2 | Major section | Must follow h1 without a gap |
| h3 | Subsection | Must sit below an h2 |
| h4 | Sub-subsection | Must sit below an h3 |
| h5 | Deep detail | Use sparingly; no level skipping |
| h6 | Deepest detail | Rarely needed; still must not skip |
| Issue | Severity | Meaning |
|---|---|---|
| Multiple h1 tags | Error | More than one h1 competes for the main topic |
| No h1 tag | Error | Headings exist but none declares the main topic |
| Skipped heading level | Warning | A level was jumped, leaving a gap in the outline |
| Empty heading | Warning | A heading tag contains no text |
| First heading not h1 | Info | The outline does not start at the top level |
| No headings found | Info | The pasted HTML contains no heading tags |
Worked Examples
- A clean outline — h1, then h2, h3, h2, h3, h3 returns a PASS status with one h1, no errors, and no warnings.
- The Invalid Example design — h1, h3, h2, h4, h1, h5, h6 produces a FAIL because of the second h1, plus warnings for the h1-to-h3, h2-to-h4, and h1-to-h5 skips.
- Missing h1 — an outline beginning with h2 and h3 reports an error for the missing h1 and an info note that the first heading is not an h1.
- Multiple h1 — two h1 tags each report an error on the second and later occurrences, since only one main topic is allowed.
- Empty heading — an empty h1 raises a warning for an empty heading and contributes to a WARN status.
- No headings — pasting markup with no heading tags at all yields an informational note that none were found rather than an error.
Tips and Common Mistakes
- Use headings for structure, not styling — do not reach for an h3 because the text looks the right size; pick the level that fits the outline and style it with CSS.
- Keep exactly one h1 — the most common failure is multiple h1 tags, which dilutes the page topic for search engines and screen readers alike.
- Never skip levels — stepping from h1 straight to h3 leaves a gap; insert the intermediate level or move down one at a time.
- Write descriptive headings — an empty or vague heading conveys nothing when read out of context in a navigation list.
- Start with h1 — leading your outline with an h2 is an informational note, not a hard failure, but it is better to open at the top level.
- Check both examples — load the Valid and Invalid examples to see exactly how the pass, warn, and fail states look before checking your own markup.
Common Use Cases
Heading structure affects search visibility and accessibility on almost every page, so auditing it is a routine part of building and maintaining a site. These are the situations where this checker earns its place.
- SEO audits — confirm a page has one clear h1 and a logical hierarchy that search engines can follow.
- Accessibility reviews — ensure screen reader users can navigate the page through a coherent heading list.
- Content review of drafts — verify an article's outline reads sensibly before it is published.
- Theme and template QA — catch templates that emit multiple h1 tags or skip levels across different page types.
- Teaching HTML semantics — demonstrate the difference between valid and invalid heading outlines with the built-in examples.
- Migration and refactoring checks — make sure pasted or converted content preserves a sensible outline after a redesign.
Frequently Asked Questions
How many h1 tags should a page have?
Exactly one. The h1 tag represents the main topic of the page. Multiple h1 tags confuse search engines and screen readers, so the checker raises an error for each extra one.
Can I skip heading levels, such as going from h1 to h3?
You can, but you should not. Skipping a level leaves a gap in the document outline and is reported as a warning. Always step down one level at a time.
What do the PASS, WARN, and FAIL statuses mean?
FAIL means at least one error was found, such as multiple h1 tags or a missing h1. WARN means there are warnings but no errors, such as a skipped level. PASS means no errors and no warnings.
Is an empty heading really a problem?
Yes. A heading with no text gives no information and can produce confusing gaps in a screen reader navigation list, so it is flagged as a warning.
What if my HTML contains no headings at all?
The checker reports an informational note that no headings were found. It is not treated as an error, but a page with no headings usually has a weak content outline.
Does the order of headings matter?
Yes. Headings are evaluated in document order, and the checker compares each level to the one before it to detect skips, so the sequence is exactly what is assessed.
Is my HTML sent to a server?
No. All analysis happens in your browser using the DOM parser, so the content you paste never leaves your device.
Should the first heading always be an h1?
It is best practice. If the first heading is not an h1, the tool adds an informational note suggesting you start with one, though it is not a hard error.