Paste a page's HTML and this checker draws its heading outline as an indented tree, from h1 down to h6, including elements with role="heading". It flags skipped levels such as an h2 followed by an h4, a missing or repeated h1, and empty headings. Parsing happens in your browser, so the code never leaves your device.
| Check | Example | Why it matters |
|---|---|---|
| Skipped level | h2 followed directly by h4 | Screen reader users lose track of where they are |
| No h1 | Page starts at h2 | The page has no main heading |
| More than one h1 | Logo and title both h1 | One h1 should name the page |
| Empty heading | <h3></h3> or only an icon | Announced with nothing to say |
| First heading not h1 | h3 before the h1 | The outline starts in the middle |
Updated
Headings are how people using screen readers skim a page, and they give search engines the shape of your content. Paste the HTML of a page or a component below, from view source or your editor, and the outline appears with each problem marked on the line where it happens.
Paste HTML below. It is read in your browser and never uploaded.
<header><h1>Harbour Bakery</h1></header>
<main>
<h1>Fresh bread in Halifax</h1>
<h2>Our loaves</h2>
<h4>Sourdough</h4>
<h4>Rye</h4>
<h2>Visit us</h2>
<h3></h3>
<div role="heading">Opening hours</div>
</main>| Level | Typical use |
|---|---|
| h1 | The page title, once |
| h2 | Main sections of the page |
| h3 | Subsections inside an h2 |
| h4 | Detail inside an h3, such as items in a list of features |
| h5, h6 | Rare; deep documentation and legal text |
The card titles jump from h2 to h4 because h4 looked the right size.
<h1>Pricing</h1>
<h2>Plans</h2>
<h4>Starter</h4>
<h4>Studio</h4>The cards use h3, the next level down, and a class keeps them small.
<style> .card-title { font-size: 1rem; margin: 4px 0 } </style>
<h1>Pricing</h1>
<h2>Plans</h2>
<h3 class="card-title">Starter</h3>
<h3 class="card-title">Studio</h3>Each row is one heading, indented by its level. A healthy outline reads like a table of contents: one title, a handful of h2 sections, and h3 subsections under them where needed.
Warnings point at the heading where the jump happened, not at the one before it. Fix them from the top down, because one wrong level early on can make everything below it look odd.
Most skipped levels come from choosing a heading for its default size. Templates and page builders often do this in footers and cards. Others come from components reused on pages with a different structure, which is why a component's heading level is worth making configurable.
Empty headings usually wrap an icon or an image without alt text. Give the image alt text, add visible text, or stop using a heading for it.
The W3C heading tutorial says skipping ranks can be confusing and should be avoided where possible, for example an h2 followed directly by an h4. Closing a section and jumping back up, such as h4 to h2, is normal.
HTML allows it, but MDN recommends a single h1 that describes the page's content. The old idea that each section could restart at h1 relied on a document outline algorithm that browsers do not use, so this tool warns on a second h1.
This is a static page running in your browser, and browsers block one site from reading another site's HTML. Pasting the code keeps the tool honest and private: nothing is sent anywhere.
Yes. An element with role="heading" is read at its aria-level. If aria-level is missing, browsers fall back to level 2, so the checker treats it as an h2 and flags the missing attribute.
Headings describe the structure of your content to every reader, including search engines. We make no promise about rankings; a clear outline is worth having for people first.
Related: HTML accessibility checker, Table of contents generator, HTML validator, Website accessibility checklist, WCAG checklist.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.