Page structure

Page landmarks

Structure the major regions of a page with header, nav, main, and footer elements that give browsers and assistive tools useful meaning.

7 minute lesson

~~~

Semantic container elements describe the major regions of a page.

Landmarks give the page a useful map.

<body>
  <header>
    <a href="/">City Cycles</a>
    <nav aria-label="Primary">
      <a href="/routes/">Routes</a>
      <a href="/repairs/">Repairs</a>
    </nav>
  </header>

  <main>
    <h1>Copenhagen cycling guide</h1>
    <p>Plan a safe route across the city.</p>
  </main>

  <footer>
    <p>Published by City Cycles.</p>
  </footer>
</body>

header contains introductory content. A page can also have headers inside articles and sections.

nav contains a major group of navigation links. You do not need to wrap every small set of links in nav.

main contains the unique main content of the page. A page should have one visible main element.

footer contains closing information for its nearest section or for the page as a whole.

These elements mostly behave like generic containers visually. Their value is the meaning they provide. Screen-reader users can use landmarks to jump directly to navigation or main content.

Quick check

Result

You got of right.

Lesson completed