jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML 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-06-11

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 閳ユ攣 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 tools

Html

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

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool

Also try

Also try

Seo

AI Crawler robots.txt Builder

Build a robots.txt policy for AI crawlers. Choose from open, selective, or strict presets and block specific AI training bots while allowing search engines.

Open tool