HTML Landmarks Checker

Why semantic HTML matters

HTML landmarks tell Google where the real content is. Wrapping everything in <div> tags gives search engines nothing to work with. A <main> tag tells Google where your actual content lives, and a <nav> identifies navigation while a <footer> separates boilerplate from substance. Without these HTML landmarks, crawlers have to guess, and screen readers leave users stranded.

This semantic HTML checker scans any page for landmark elements, ARIA roles, and broader accessibility issues. Every finding that breaks a WCAG 2.2 criterion names it, links the W3C explanation, and shows the exact element on your page that breaks it, with a copy-ready fix. Findings that are not conformance failures say so 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. JAWS and NVDA both let users jump between landmarks with a single keystroke, the same way sighted users scan a page visually. A page without landmarks forces screen reader users to read everything linearly, which is slow and exhausting. The European Accessibility Act now requires WCAG 2.1 AA compliance for most EU-facing sites, and proper landmark usage is explicitly part of that.

HTML landmarks vs. ARIA landmark roles

Both exist, both do the same job, but use native HTML whenever possible. A <nav> element is functionally identical to a <div role="navigation">, but it's shorter and works in older browsers that strip ARIA attributes. The rule: use ARIA roles only when you can't use a native element that already has the role built in. That covers 95% of cases.

Common HTML landmark mistakes

The usual pitfalls. Multiple <main> elements on one page (spec says exactly one). 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