Missing Landmark Elements

Your page has no header, main, footer, or nav elements. It's a book with no chapters — just one endless wall of text.

What is this?

Think of a book with no table of contents, no chapter headings, and no page numbers — just a continuous wall of text from cover to cover. That is what your website looks like to screen readers and assistive technologies when you skip HTML landmark elements. Landmarks like <header>, <main>, <footer>, and <nav> are invisible chapter markers that divide your page into meaningful regions. Sighted users can visually scan a page and understand its structure. Landmarks give that same ability to everyone else.

Why it matters

For your visitors: Screen reader users navigate by landmarks the way sighted users scan by visual layout. Without them, a blind user has to listen to the entire page linearly to find the content they want. Landmarks let them jump directly to the nav, the main content, or the footer. Removing landmarks removes their ability to skim.
For your business: Roughly 8 million people in the US alone use screen readers. Beyond disability, landmarks help search engines understand your page structure, which can improve SEO. Proper semantic HTML also makes your codebase cleaner and easier for your future self (or your AI tools) to maintain.
The standard: WCAG 1.3.1 (Info and Relationships) requires that page structure be programmatically determinable. HTML landmark elements are the most straightforward way to achieve this. The W3C explicitly recommends using <header>, <nav>, <main>, and <footer> to identify page regions.

Proper landmarks

<body>
  <header>
    <nav aria-label="Main">...</nav>
  </header>
  <main>
    <h1>Page content</h1>
    <article>...</article>
  </main>
  <footer>
    <p>&copy; 2026 YourApp</p>
  </footer>
</body>

Div soup — no landmarks

<body>
  <div class="top-bar">
    <div class="links">...</div>
  </div>
  <div class="content">
    <div class="title">Page content</div>
    <div class="stuff">...</div>
  </div>
  <div class="bottom">
    <div>&copy; 2026 YourApp</div>
  </div>
</body>

How to fix it

React / Next.js

Your root layout should use semantic elements. This takes five minutes and changes nothing visually — but transforms the experience for assistive technology users.

// src/app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {/* HEADER landmark — contains your nav and logo */}
        <header className="border-b">
          <nav aria-label="Main" className="mx-auto flex max-w-6xl items-center gap-6 px-4 py-3">
            {/* nav links */}
          </nav>
        </header>

        {/* MAIN landmark — one per page, wraps your primary content */}
        <main className="mx-auto max-w-6xl px-4 py-8">{children}</main>

        {/* FOOTER landmark — copyright, legal links, contact */}
        <footer className="border-t px-4 py-6 text-sm text-gray-500">
          <p>&copy; 2026 YourApp. All rights reserved.</p>
        </footer>
      </body>
    </html>
  );
}

If you have a sidebar, wrap it in <aside> to create a complementary landmark. For multiple <nav> elements (main nav plus footer nav), distinguish them with aria-label:

<nav aria-label="Main">...</nav>
<nav aria-label="Footer">...</nav>

Plain HTML

<body>
  <!-- Header landmark -->
  <header>
    <nav aria-label="Main">
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <!-- Main landmark — only ONE per page -->
  <main>
    <h1>Your content here</h1>
    <article>
      <h2>Article title</h2>
      <p>Article content...</p>
    </article>
  </main>

  <!-- Complementary landmark for sidebars -->
  <aside>
    <h2>Related links</h2>
  </aside>

  <!-- Footer landmark -->
  <footer>
    <nav aria-label="Footer">
      <a href="/privacy">Privacy</a>
      <a href="/terms">Terms</a>
    </nav>
    <p>&copy; 2026 YourApp</p>
  </footer>
</body>

The rules are simple: one <main> per page, <header> at the top, <footer> at the bottom, <nav> around navigation groups, and <aside> for supplementary content. If you have multiple navs, label each one with aria-label.

High impact — navigation~2 paws

Swapping divs for semantic elements costs you zero effort and zero pixels. The cat finds div soup personally offensive.

How the cat scores this

The scanner checks for the presence of four key landmarks: <header>, <nav>, <main>, and <footer>. It flags pages missing any of these. It also checks that there is exactly one <main> element (multiple mains confuse assistive technology) and that <nav> elements have distinguishing aria-label attributes when more than one exists. Pages built entirely out of <div> elements with no landmarks get the harshest score hit.