HTML Landmarks Checker

Why semantic HTML matters

HTML landmarks give a page a map. A <main> tag marks where the actual content lives, a <nav> marks navigation, and a <footer> separates boilerplate from substance. Screen readers use that map directly. For Google it's a weaker signal than a lot of SEO advice claims: Google's documentation doesn't list landmark elements as a ranking factor. Build them for your users, and treat any SEO effect as a bonus.

This semantic HTML checker scans any page for native landmark elements, heading structure and common accessibility issues. It looks for the HTML elements themselves, so a page that marks its regions only with ARIA roles like role="main" will show them as missing. A finding that breaks a WCAG 2.2 criterion names it, links the W3C explanation and, where it can, shows the element on your page, with a copy-ready fix. Findings that are not conformance failures, like a missing <header> or a skipped heading level, are labeled best practice instead, because a tool that stamps "WCAG" on everything teaches you to stop reading the label.

HTML landmarks for accessibility

For screen reader users, landmarks are how you navigate a page fast. NVDA jumps between landmarks with the D key, JAWS with R. Without landmarks, users fall back on headings or read the page top to bottom, which is slow. Landmarks are one documented way to meet WCAG success criteria 1.3.1 and 2.4.1, but not the only one, so a missing <main> on its own isn't a conformance failure. That distinction matters since June 28, 2025, when the European Accessibility Act started applying to e-commerce, banking and other listed services in the EU, with a harmonised standard built on WCAG 2.1 AA.

HTML landmarks vs. ARIA landmark roles

Both exist, both do the same job, but use native HTML whenever possible. A <nav> element gets the navigation role automatically, the same as <div role="navigation">, with less markup and less to get wrong. That's the first rule of ARIA in the W3C's own guidance: use ARIA roles only when you can't use a native element that already has the role built in. That covers almost every case.

Common HTML landmark mistakes

The usual pitfalls. Multiple <main> elements on one page (the HTML spec allows only one visible <main>). A <nav> around every menu, including footer links, which dilutes the semantic meaning. Wrapping everything in <div> tags. Missing <main> entirely.

Explore more tools

FAQ