jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML & Accessibility Tools

Free HTML Landmark Checker

Scan pasted HTML for common landmark elements: header, main, nav, footer, aside, section, form, and search. Flags missing essential landmarks and explains why each one matters for accessibility.

Loading tool...

What is HTML Landmark Checker?

ARIA landmarks are HTML elements that define page regions. Screen readers use landmarks to let users jump between page sections. Common landmarks include header, main, nav, footer, aside, and form. Missing landmarks make pages harder to navigate for assistive technology users.

quickAnswer

Paste your HTML to check which ARIA landmark elements are present and which are missing. Screen readers use landmarks to help keyboard and assistive technology users navigate between page regions.

Last updated: 2026-07-16

limitations

  • The tool scans for element names only. It does not check whether landmarks have accessible names provided through aria-label, aria-labelledby, or visible headings.
  • The checker does not validate ARIA role assignments. An element with a role attribute may override or remove the implicit landmark role.
  • Pasting partial HTML may miss landmark elements outside the pasted content. Paste the full page HTML for a complete audit.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

How to use this tool

  1. Paste your HTML markup into the input area.
  2. The tool scans for landmark elements and displays which ones are present.
  3. Review the results showing which landmarks are missing from your page.
  4. Add the missing landmark elements to improve page accessibility.

What you can use it for

  • Audit a static page template for missing landmark elements before publishing.
  • Check that every page on a site has a main element for screen reader navigation.
  • Verify that navigation blocks use the nav element instead of generic div elements.

Use cases

Practical examples

example

Missing main landmark

A page template audit reveals a missing main element. The checker flags it as a required landmark and explains that screen readers depend on main to jump to page content.

example

Div navigation detected

A blog layout has header and footer elements but uses a div for navigation. The checker suggests replacing the div with a nav element for better landmark structure.

Common mistakes

  • Using multiple main elements on one page, which is not standard and confuses screen reader navigation.
  • Wrapping everything in a nav element instead of using it only for actual site navigation.
  • Using section elements without accessible names, which makes them less useful as ARIA landmarks.

verification

  1. Load the audited page in a browser and use a screen reader or browser extension to navigate by landmarks and confirm the expected regions are present.
  2. Run the page through a formal accessibility testing tool such as axe DevTools or WAVE to cross-check the landmark audit results.

FAQ

Questions about HTML Landmark Checker

How many main elements should a page have?

One visible main element per page. Multiple main elements are not standard and confuse screen reader navigation.

Are HTML5 semantic elements the same as ARIA landmarks?

Yes. Elements like header, main, nav, footer, aside, and form have implicit ARIA landmark roles. Using these semantic elements automatically creates landmarks.

Do I need labels on section elements?

A section element without an accessible name does not register as a landmark in the accessibility tree. Add an aria-label or aria-labelledby attribute to section elements that represent distinct page regions.

What is the difference between the article and section elements?

Article represents a self-contained piece of content that makes sense on its own when taken out of the page —a blog post, a news story, a product card, a forum post. Section is a thematic grouping of content that requires context from the rest of the page and typically has a heading. Use article for independent, distributable content and section for dividing a page into thematic areas.

Related tools

More html & accessibility tools

HTML & Accessibility Tools

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

HTML & Accessibility Tools

Customizable Select Generator

Generate CSS for customizable select elements using appearance: base-select, picker icons, checkmarks, and open/closed state styling.

Open tool

Also try

Also try

CSS & Design Tools

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

CSS & Design Tools

CSS Scroll-State Query Generator

Generate CSS scroll-state() container queries for styling snapped, stuck, or scrollable elements. Includes JavaScript fallback for cross-browser support.

Open tool