# Landmarks — Web Accessibility (A11y)

Source: https://www.geekswithgeeks.com/en/accessibility/a11y-landmarks

> Use semantic regions to help users navigate and skip around pages.

## Landmark elements

`<header>` (banner), `<nav>` (navigation), `<main>` (main content, should appear once), `<aside>` (complementary), `<footer>` (contentinfo). Screen readers announce these and let users jump between them.

## Landmark layout

Basic page structure with landmarks.

```html
<header>
  <nav>Main navigation</nav>
</header>

<main>
  <article>Page content</article>
</main>

<aside>
  Sidebar or related links
</aside>

<footer>
  © 2024 Company
</footer>
```

## Multiple navigation regions

Use aria-label to distinguish multiple `<nav>` elements: `<nav aria-label="Main">` vs `<nav aria-label="Footer">` etc.

## Multiple nav landmarks

Use aria-label to distinguish multiple nav elements