foundation

Landmarks and headings

Represent page regions and heading hierarchy so assistive tech and search crawlers understand the page.

Landmarks — `header`, `nav`, `main`, `aside`, `footer` — describe page regions. Headings describe content hierarchy, not font size. Together they let keyboard and screen reader users jump through a page and help crawlers understand section relationships.

Use one `main` per page. Heading levels should not skip ranks for styling. Repeated navigation regions benefit from `aria-label` when labels are not visible.

					<body>
  <header>...</header>
  <nav aria-label="Primary">...</nav>
  <main>
    <h1>Account settings</h1>
    <section aria-labelledby="profile-heading">
      <h2 id="profile-heading">Profile</h2>
    </section>
  </main>
</body>

On interviews: explain one main landmark, ordered headings, and when a div is still acceptable.

Common pitfalls: skipping heading levels, nesting interactive elements incorrectly, or ARIA roles that contradict native semantics.

The trade-off is semantic richness versus layout convenience — extra landmarks help navigation but noisy structure confuses users.

Checklist:

One `main` per document.
Order headings by structure, not appearance.
Name repeated nav regions.
Prefer semantic elements over roles.