Landmark Elements & Page Navigation

Landmark elements define the major structural regions of a page. Screen reader users can navigate a list of landmarks — jumping directly to the navigation, the main content, or the footer without tabbing through every element. This is one of the most important navigation shortcuts for screen reader users, and it is free when you use semantic HTML correctly.

What landmark elements are

HTML landmark elements are semantic elements that browsers expose as navigable regions to assistive technologies. The main ones:

Element	Landmark role	Purpose
`<header>`	banner	Site-level header (logo, nav)
`<nav>`	navigation	Links for navigating the site or page
`<main>`	main	The primary content of the page
`<aside>`	complementary	Related but secondary content
`<footer>`	contentinfo	Site-level footer (copyright, links)
`<section>`	region (with label)	A thematic section with a heading

When a screen reader user opens a landmark list, they see these regions and can jump directly to any of them.

Without landmarks, a screen reader user arriving at a new page must listen to content from the top — through the header, through all the navigation links — before reaching the main content. With landmarks, they press a single key to jump directly to <main>.

This is called “skip navigation” — the ability to skip repeated content (header, nav) and go straight to the page’s unique content. Landmarks provide this automatically. Many older accessibility patterns required a visible or hidden “skip to content” link to achieve the same thing — landmarks make that unnecessary when used correctly.

Rules for landmark usage

One <main> per page.

<main> identifies the primary content of the page. There can only be one. It should not contain the site header, navigation, or footer — just the content unique to that page.

<header> and <footer> at page level vs. inside <article>.

A <header> inside <article> is the article’s header — not the page header. Both are valid. The page-level <header> is a landmark (banner); the article-level <header> is not. Same for <footer>.

<nav> for site navigation and in-page navigation.

A page can have more than one <nav> — for example, the main site navigation in the header and a secondary navigation in the footer. Both are valid landmarks.

<section> becomes a landmark only with a label.

A <section> element becomes a named region landmark only when it has an accessible name — typically provided by a heading inside it. Since every <section> in the Summit Trail Outfitters site already has a heading, this is automatically satisfied.

A correct landmark structure

<body>
  <header>                        <!-- banner landmark -->
    <p>Summit Trail Outfitters</p>
    <nav>                         <!-- navigation landmark -->
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="tours.html">Tours</a></li>
      </ul>
    </nav>
  </header>

  <main>                          <!-- main landmark -->
    <section>
      <h1>Our Tours</h1>
      <!-- page content -->
    </section>
  </main>

  <footer>                        <!-- contentinfo landmark -->
    <p>&copy; 2026 Summit Trail Outfitters</p>
    <nav>                         <!-- navigation landmark (footer nav) -->
      <ul>
        <li><a href="index.html">Home</a></li>
      </ul>
    </nav>
  </footer>
</body>

This structure gives a screen reader user five landmarks to navigate: banner, navigation (header), main, navigation (footer), and contentinfo.

Exercise

Open each Summit Trail Outfitters page and verify landmark structure:

index.html — Confirm: <header> wraps site name and nav; <main> wraps all page sections; <footer> wraps copyright and footer nav. Check that <main> appears exactly once.
tours.html, about.html, contact.html — Same verification. The outer shell should be identical across all pages.
blog-article.html — Confirm <aside> is inside <main> but outside <article>. The <header> and <footer> inside <article> are article-level, not page-level landmarks — that is correct.

For each page, the landmark structure should be:

banner (<header>)
  navigation (<nav>)
main (<main>)
  [page sections]
  [aside, if present]
contentinfo (<footer>)
  navigation (<nav>)

If any page is missing <main>, or has content outside these landmarks, fix it now.

Recap

Landmark elements (<header>, <nav>, <main>, <aside>, <footer>) define major page regions that screen reader users can navigate directly.
<main> appears exactly once per page and contains only the page’s primary content.
Multiple <nav> elements on a page are acceptable — one for site nav, one for footer nav.
<header> and <footer> inside <article> are article-level, not page-level landmarks.
Correct landmark structure is a direct result of using semantic HTML — if you used the right elements in Module 08, this is already mostly done.