Lesson 13 / 25

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.

<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