# Missing <main> landmark in Svelte

> How to fix missing <main> landmark in Svelte — with the exact fix and copy-paste code.

_Category: AI readiness · Detector `aeo` · Check `no-main-landmark` · Severity: info_

Landmarks like `<main>`, `<nav>`, and `<article>` tell assistive tech and content extractors where the primary content is, instead of forcing them to guess from a sea of `<div>`s. Screen-reader users jump straight to `<main>`; answer engines use it to separate content from chrome. AI scaffolds output `<div>`-only trees, so this signal is simply absent.

## The fix for Svelte

Wrap the page slot in `<main>` in your root `+layout.svelte`.

```svelte
<SiteHeader />
<main>
  <slot />
</main>
<SiteFooter />
```

### Steps

1. Identify the primary content region unique to the page
2. Wrap it in a single `<main>` element
3. Use `<nav>`/`<header>`/`<footer>` for the surrounding chrome

## How VibeCheck detects it

The `aeo` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.

- **Issue string:** `No <main> landmark`
- **Threshold:** document.querySelector("main") returns null

## FAQ

### Can I have more than one <main>?

Only one `<main>` should be visible per page. You may have multiple in the DOM if all but one are hidden, but the simplest and safest approach is exactly one visible `<main>` per page.

### What goes inside <main> vs outside?

`<main>` holds the content unique to this page. The site header, primary navigation, and footer are repeated across pages, so they belong in `<header>`, `<nav>`, and `<footer>` outside `<main>`.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/missing-main-landmark.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/missing-main-landmark. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt