Free Online HTML Landmark Inspector
Inspect semantic landmarks and heading structure in HTML.
The inspector reads the markup you paste and never renders or executes it. Scripts, styles, and remote resources are ignored.
Warnings
Landmark counts
| Element | Role | Count | Labels |
|---|
Heading outline
| Level | Heading text |
|---|
About the HTML Landmark Inspector
Landmarks are the structural signposts of a page. They let screen reader users jump directly to the main
content, a navigation menu, a complementary sidebar, or the page footer instead of listening through everything
in order. Native elements such as header, nav, main,
aside, section, and footer map to landmark roles when they are used in
the right context. This inspector parses pasted HTML, counts those elements, and checks the heading outline that
gives the page its internal table of contents.
What the inspector looks for
The tool counts every header, navigation region, main element, complementary aside, section, and footer. It
distinguishes named sections and forms because those become landmarks only when they have an accessible name.
It also lists labels from aria-label or aria-labelledby so you can see whether two
navigation regions are distinguishable. The heading outline is built from h1 through
h6 in document order, with the text content of each heading.
Common structural problems
The most frequent issue is a missing main element, which removes the most useful skip target on the
page. Multiple main elements are also a problem because assistive technology expects one primary
content area. A page with no h1 lacks a clear top-level title, while several h1
elements can flatten the outline. Skipped levels, such as an h2 followed by an h4,
are not automatically invalid HTML, but they make the document hierarchy harder to follow. Unlabelled sections
and duplicate navigation regions round out the list of warnings.
Context matters for header and footer
A header inside an article or section is not a banner landmark; it is a local header for that
section. The same is true for footer, which becomes a contentinfo landmark only when it belongs to
the page rather than a nested component. This inspector counts the elements but cannot always know the intended
scope, so treat the counts as a map and confirm the structure in the browser's accessibility tree. Pair the
result with keyboard testing to make sure skip links and focus order follow the same model.
Frequently asked questions
How many main elements should a page have?
One visible main element is the usual expectation. If the page swaps views without a reload, make sure only one main region is exposed at a time, or use the appropriate application pattern and labelling.
Is every section a landmark?
No. A section becomes a region landmark only when it has an accessible name, usually from aria-labelledby pointing at its heading. Unnamed sections are still useful containers, but they are not exposed as landmarks.
Does the inspector execute scripts or load images?
No. The HTML is parsed with DOMParser into an inert document. Scripts do not run, styles are not applied, and remote resources are not fetched. Only the supplied markup is inspected.