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.
Semantic container elements describe the major regions of a page.
<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.
My advice is to add landmarks only when the content matches. A page with one link in the footer does not need a nav there. A sidebar ad is not aside just because it sits beside the article.
When you inspect a page in DevTools, open the Accessibility pane on header, nav, main, and footer. You should see roles like banner, navigation, main, and contentinfo. That mapping is why these elements exist.
If you hide duplicate navigation off-screen for mobile layouts, keep one clear nav for the primary menu. Too many navigation landmarks make the page harder to skim with assistive technology.
Skip links are optional but useful on long pages: a first link in body that jumps straight to main. They help keyboard users bypass repeated navigation on every page load.
A site logo in header is usually a link back to the home page. That pattern belongs in header, not in a separate nav, unless the logo sits inside a larger navigation block.
Quick check
Result
You got of right.
Lesson completed