Header, Footer, and Nav
Define the top, bottom, and navigation of your page.
Syntax
<header> ... </header>
<nav> ... </nav>
<footer> ... </footer>These semantic elements structure the top-level areas of a page.
<header>— introductory content or a group of navigation links.<nav>— a section of navigation links.<footer>— footer content like copyright and contact info.
Example
Loading editor…
Press Run to see the result.
When to use it
- A site uses <header> to house the logo, primary navigation, and a search bar that appears on every page.
- A blog article uses a local <header> to contain the post title, author byline, and publish date.
- A page uses <footer> at the bottom to hold copyright notice, social links, and secondary navigation.
More examples
Site-wide header with navigation
The site header contains the logo link and primary nav; aria-label helps screen readers distinguish multiple navs.
<header>
<a href="/" aria-label="Home">
<img src="logo.svg" alt="SoundsCode" width="120">
</a>
<nav aria-label="Primary">
<a href="/courses">Courses</a>
<a href="/about">About</a>
<a href="/login">Log in</a>
</nav>
</header>Article-scoped header with metadata
<header> inside <article> scopes the title and metadata to that article, not the whole page.
<article>
<header>
<h1>Getting Started with HTML</h1>
<p>By <a href="/authors/jane">Jane Doe</a> •
<time datetime="2025-03-15">March 15, 2025</time></p>
</header>
<p>HTML is the structure of the web...</p>
</article>Page footer with legal and social links
<footer> groups copyright, secondary navigation, and contact information at the bottom of the page.
<footer>
<p>© 2025 SoundsCode, Inc. All rights reserved.</p>
<nav aria-label="Footer">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
<a href="/sitemap">Sitemap</a>
</nav>
<address>
Contact: <a href="mailto:[email protected]">[email protected]</a>
</address>
</footer>
Discussion