What are HTML landmarks?

Landmarks are semantic regions — header (banner), nav (navigation), main, and footer (contentinfo) — that let assistive-technology users jump between major page areas. The auditor flags missing ones, especially the all-important main.

Why are clickable divs a problem?

A with an onclick has no role, is not in the tab order, and does not respond to Enter or Space, so keyboard and screen-reader users cannot use it. A native or gives you all of that for free.

Div-soup is markup built almost entirely from generic and elements where semantic elements (section, article, aside, nav, ul/li, figure) would carry meaning. The auditor flags pages where over 55% of elements are div/span.

Why does skipping heading levels matter?

Headings form a document outline that screen-reader users navigate by. Jumping from an h2 straight to an h4 implies a missing level and breaks that outline. The auditor flags the first such skip it finds.

Is my markup uploaded?

No. Parsing happens in your browser with the native HTML parser. Nothing is sent to a server, so internal templates are safe to audit.

Semantic HTML Auditor

Semantic HTML is the foundation that accessibility, SEO and maintainability all stand on. When a page is built from anonymous <div> and <span> wrappers, screen readers get no landmarks to navigate, search engines get weak structure, and developers get markup that is hard to reason about. This auditor parses your HTML and flags the four highest-impact structural problems so you can move from div-soup to meaningful markup.

How it works

The tool parses your pasted HTML in the browser and runs four groups of checks:

Landmarks — it confirms a single <main> (or role="main") exists and notes any missing <nav>, <header> or <footer>. A missing main is an error because it is the primary navigation target for assistive tech.
Div-soup ratio — it counts how many elements are <div> or <span>. When that exceeds 55% on a non-trivial page, it flags the page and suggests semantic replacements like <section>, <article>, <aside>, <nav> and <ul>/<li>.
Fake interactive elements — it finds <div> or <span> elements with an onclick handler or a role="button"/role="link", especially those that are not keyboard-focusable, and recommends a real <button> or <a>.
Heading outline — it checks for exactly one <h1> and reports the first place a heading level is skipped (for example h2 straight to h4).

Example

The bundled example wraps a logo, menu and footer in plain <div>s, jumps from <h1> to <h3>, and uses <div class="btn" onclick="go()"> as a button. The auditor flags the missing <main>/<nav>/<footer>, the heading skip, and the clickable div — each with a specific fix.

Tips

Replace structural wrappers with the element that describes their role: a site menu is <nav>, a self-contained card is <article>, a list of items is <ul>.
Never reinvent a button. <button type="button"> is keyboard-operable, focusable and announced correctly out of the box.
Keep one <h1> per page and never skip heading levels — the outline is a navigation aid, not just visual sizing.
This is a static structural check; pair it with a screen-reader pass for full coverage. All parsing is local to your browser.