Heading Structure Checker

Headings are the table of contents a page never prints. A crawler reads them to work out what the page covers and how its parts relate; a screen reader user navigates by them directly, jumping heading to heading rather than reading top to bottom.

It is a heading extractor before it is a checker: paste the source and every h1 to h6 comes out in document order, indented to show the hierarchy they claim. Most of the time reading that outline is the whole job — a page whose structure is wrong is obviously wrong once it is written down as a list.

The interesting output is the skipped level. Going h2 → h4 renders identically to h2 → h3 — the only difference is font size, and that is usually set by a class anyway. So it survives every visual review a page ever gets. Someone moving through the page by heading arrives at a subsection whose parent does not exist, which is the same experience as a missing chapter.

Levels are for structure, not for size. The commonest cause of a broken outline is picking a heading level because it looked right. That is what CSS is for. The level says where the section sits in the document; the stylesheet says how big it looks.

The sample has all four faults: an h2 followed by an h4, an h3 followed by an h5, and an empty h2 at the end. The empty one is usually a heading wrapped around an image with no alt text, which means the section has a title nobody can read — neither a crawler nor anyone using a screen reader.

More than one h1 is a warning, not an error. HTML5 permits it and search engines tolerate it. It is still worth knowing about, because a document with two titles effectively has none, and it usually means a template is emitting one alongside a page that already has its own.

Returning to a shallower level is not a skip. h2 → h3 → h2 is a section ending and a new one starting, which is exactly right. Only going deeper by more than one step leaves a gap.

For the head of the page rather than its body, paste the same source into the meta tag analyser.