Page Structure Patterns

Landmark Page Regions

A small page uses header, nav, main, and footer landmarks so page regions are clear.

Program

Landmarks give a page a simple structure. Even a small page is easier to scan when header, navigation, main content, and footer are explicit.

landmark_page_regions.html
Visuals: captured from real browser rendering
<header aria-label="Site header">
  <h1>Account</h1>
</header>
<nav aria-label="Account navigation">
  <a href="#overview">Overview</a>
</nav>
<main id="overview">
  <h2>Overview</h2>
</main>
<footer>
  <p>Support links</p>
</footer>
<style>
  header, nav, main, footer { border: 1px solid #94a3b8; padding: 10px; margin-block: 8px; }
</style>

  1. Create the header region.

    The page starts with a header landmark.
    The page starts with a header landmark.

  2. Name the navigation landmark.

    The navigation landmark has a clear local name.
    The navigation landmark has a clear local name.

  3. Add the main region.

    The primary page content has a main landmark.
    The primary page content has a main landmark.

  4. Add the footer region.

    Support links are placed in a footer landmark.
    Support links are placed in a footer landmark.

  5. Render the region map.

    The visual boxes make each page region easy to see.
    The visual boxes make each page region easy to see.

  6. Check the region set.

    The selector lists the same four landmarks used in the page.
    The selector lists the same four landmarks used in the page.
landmarks Landmark elements expose broad page regions.
landmark names Labels help when a landmark needs a specific name.
region map Visible boxes can mirror the structural regions for beginners.