Module 9: Semantic HTML and Page Layouts
header, nav, main, and footer
Build page landmarks with the elements that identify the header, navigation, main content, and footer.
Most pages have a few broad regions. HTML provides elements that express those regions directly.
<body>
<header>
<a href="/">Field Journal</a>
<nav aria-label="Main navigation">
<a href="/stories/">Stories</a>
<a href="/about/">About</a>
</nav>
</header>
<main>
<h1>Latest stories</h1>
<!-- Main page content -->
</main>
<footer>
<p>© 2026 Field Journal</p>
</footer>
</body>
header introduces a page or section. nav identifies a major group of navigation links. main contains the dominant content of the page; a document should generally have one visible main landmark. footer contains information about its nearest section or the page, such as author details, related links, or copyright information.
Screen-reader users can navigate by landmarks rather than reading every element in sequence. Use a clear accessible name when a page has multiple navigation regions, such as “Main navigation” and “Footer navigation”.
Do not use header or footer only because you want a particular visual layout. Use them when the content serves that role. CSS can place them anywhere in the design.