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.
Quick check
Result
You got of right.
Lesson completed