Which HTML elements expose implicit landmark roles, and what do landmarks give a screen-reader user that a page built from <div>s does not?

## What a landmark actually is A **landmark** is a region of a page that assistive technology can list and jump to directly. Screen readers expose them in a rotor or menu ("navigation", "main", "banner"…) and offer a quick key to cycle through them. This is the closest thing a non-visual user has to the glance a sighted user gives a page to find the menu, the content, and the footer. Landmarks come from ARIA's set of landmark roles — `banner`, `navigation`, `main`, `complementary`, `contentinfo`, `search`, `form`, `region` — but you rarely have to write `role=` yourself, because HTML elements already map to them. ## The element-to-role map | Element | Implicit role | Notes | | --- | --- | --- | | `<header>` | `banner` | only when not nested in sectioning content | | `<nav>` | `navigation` | always | | `<main>` | `main` | one non-hidden `<main>` per document | | `<aside>` | `complementary` | tangential, related content | | `<footer>` | `contentinfo` | only when not nested in sectioning content | | `<search>` | `search` | a recent addition to HTML | | `<form>` | `form` | landmark only when it has an accessible name | | `<section>` | `region` | landmark only when it has an accessible name | The two conditional rows matter in interviews. A `<form>` or a `<section>` with no accessible name is deliberately *not* exposed as a landmark, because a page full of unnamed "region" entries is noise rather than navigation. Give the element an `aria-label` or point `aria-labelledby` at its heading and it appears in the landmark list under that name. ## What is not a landmark `<article>` maps to the `article` role. That role is genuinely useful — it tells assistive technology this is a self-contained composition, and some screen readers announce entering and leaving it — but it is **not** in the landmark set, so `<article>` does not appear in the landmark rotor. Likewise `<div>` and `<span>` map to `generic`: no role, no name, nothing to navigate by. A page whose entire skeleton is `<div class="header">`, `<div class="nav">`, `<div class="content">` produces an empty landmark list, and the only way through it is to read linearly or hunt by heading. ## A minimal correct skeleton ```html <body> <header> <a href="/">Acme</a> <nav aria-label="Primary"> <ul><li><a href="/docs">Docs</a></li></ul> </nav> <search> <form role="search" action="/search"> <label for="q">Search docs</label> <input id="q" name="q" type="search"> </form> </search> </header> <main> <h1>Installing Acme</h1> <p>…</p> <aside aria-label="Related guides">…</aside> </main> <footer> <p>© 2026 Acme</p> </footer> </body> ``` Every landmark here came from choosing an element, not from writing a role attribute. That ordering is the first rule of ARIA: prefer the native element, and only reach for `role=` when no element does the job. ## Why interviewers ask this Because it separates "I know the tag names" from "I know what the tags buy me". The elements have almost no visual effect — `<nav>` and `<div>` render the same — so the only reason to prefer them is the semantics they carry into the accessibility tree, and, secondarily, the signal they give tools that parse page structure. A candidate who says "semantic HTML is better for SEO" and stops there has missed the mechanism; a candidate who can say which element becomes which role, and which two are conditional, has actually used this. ## Common failure modes Over-landmarking is as bad as none: wrapping every visual block in `<section aria-label="…">` produces a rotor with twenty regions and helps nobody. Landmarks are a coarse map — typically one banner, one or two navs, one main, a complementary or two, one contentinfo. Content that is not inside *any* landmark is also a known problem: screen-reader users navigating landmark to landmark will simply never land on it, so keep the page's real content inside `<main>` and its neighbours rather than floating between them.