The header Element
The <header> element represents introductory content for its nearest ancestor sectioning element or the whole document. A page-level <header> typically contains the site logo, site title, and primary navigation. An article-level <header> typically contains the article title, author, and metadata.
<!-- Site-level header (direct child of body or wrapping element) -->
<header class="site-header">
<a href="/" class="logo">
<img src="/assets/logo.png" alt="ylearner home">
</a>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/html/">HTML</a></li>
<li><a href="/python/">Python</a></li>
<li><a href="/about.html">About</a></li>
</ul>
</nav>
<button id="themeToggle" aria-label="Toggle dark mode">🌙</button>
</header>Article-Level header
A <header> inside an <article> is scoped to that article. It typically holds the article's title, publication date, author, and tags — content that introduces the article but is separate from the article body.
<article>
<header>
<div class="lesson-tag">HTML Tutorial</div>
<h1>HTML Form Basics</h1>
<p class="byline">By <a href="/author/alice">Alice Smith</a></p>
<time datetime="2026-03-15">15 March 2026</time>
<div class="lesson-meta">
<span>⏱️ 14 min read</span>
<span>🎯 Beginner</span>
</div>
</header>
<p>HTML forms are the primary way users send data…</p>
</article><body> (or a non-sectioning wrapper), while article-level headers are scoped by being inside <article> or <section>.
The footer Element
The <footer> element represents closing content for its nearest ancestor sectioning element. A site-level footer typically contains copyright, legal links, contact information, and sitewide navigation. An article-level footer can contain author bios, related tags, or social sharing links.
<!-- Site-level footer -->
<footer class="site-footer">
<nav aria-label="Footer navigation">
<ul>
<li><a href="/about.html">About</a></li>
<li><a href="/privacy-policy.html">Privacy</a></li>
<li><a href="/terms.html">Terms</a></li>
<li><a href="/sitemap.html">Sitemap</a></li>
</ul>
</nav>
<p><small>© 2026 ylearner. All rights reserved.</small></p>
</footer>
<!-- Article-level footer -->
<article>
<header>…</header>
<p>Article content here…</p>
<footer>
<p>Written by <a href="/author/alice">Alice Smith</a></p>
<div class="article-tags">
<a href="/tags/html">HTML</a>
<a href="/tags/forms">Forms</a>
</div>
</footer>
</article>
The nav Element
The <nav> element wraps blocks of navigation links. Use it for major navigation sections: main site navigation, secondary category navigation, breadcrumbs, pagination, and table of contents. Not every group of links needs to be in a <nav> — use it for the navigation that users would expect to jump to directly.
<!-- Main site navigation -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/html/">HTML</a></li>
<li><a href="/python/">Python</a></li>
<li><a href="/javascript/">JavaScript</a></li>
</ul>
</nav>
<!-- Breadcrumb navigation -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/html/">HTML</a></li>
<li><a href="/html/forms/">Forms</a></li>
<li aria-current="page">Form Basics</li>
</ol>
</nav>
<!-- Sidebar tutorial navigation -->
<nav aria-label="Tutorial sections">
<ul>
<li><a href="/html/forms/form-basics.html">Form Basics</a></li>
<li><a href="/html/forms/input-types.html">Input Types</a></li>
<li><a href="/html/forms/validation.html">Validation</a></li>
</ul>
</nav>
<!-- Pagination -->
<nav aria-label="Blog post pagination">
<a href="/blog/page/1" aria-label="Previous page">← Previous</a>
<span aria-current="page">Page 2 of 5</span>
<a href="/blog/page/3" aria-label="Next page">Next →</a>
</nav><nav> on a page. Screen readers announce landmark regions and allow users to navigate between them — if two <nav> elements have no label, users hear "navigation" twice with no way to distinguish them. Use descriptive labels like "Main navigation", "Footer navigation", and "Breadcrumb".
Full Page Structure Example
Here is a complete page skeleton using all three elements together, demonstrating both site-level and article-level header/footer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Form Basics | ylearner</title>
</head>
<body>
<!-- Site-level header -->
<header class="site-header">
<a href="/" class="logo"><img src="/assets/logo.png" alt="ylearner"></a>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/html/">HTML</a></li>
</ul>
</nav>
</header>
<!-- Breadcrumb: scoped nav landmark -->
<nav aria-label="Breadcrumb">
<a href="/">Home</a> › <a href="/html/">HTML</a> › Form Basics
</nav>
<main>
<!-- Article with its own header and footer -->
<article>
<header>
<h1>HTML Form Basics</h1>
<p>By <a href="/author/alice">Alice Smith</a></p>
<time datetime="2026-03-15">15 March 2026</time>
</header>
<section>
<h2>The form element</h2>
<p>The form element wraps all controls…</p>
</section>
<section>
<h2>GET vs POST</h2>
<p>Choosing the right method matters…</p>
</section>
<footer>
<p>Tags: <a href="/tags/html">HTML</a>, <a href="/tags/forms">Forms</a></p>
</footer>
</article>
<!-- Lesson navigation -->
<nav aria-label="Lesson navigation">
<a href="/html/core-elements/classes-ids.html">← Previous</a>
<a href="/html/forms/input-types.html">Next →</a>
</nav>
</main>
<!-- Site-level footer -->
<footer class="site-footer">
<nav aria-label="Footer navigation">
<a href="/privacy-policy.html">Privacy</a>
<a href="/terms.html">Terms</a>
</nav>
<p><small>© 2026 ylearner</small></p>
</footer>
</body>
</html>header, footer, nav: Landmarks (and You Can Have Several)
These three create landmarks — regions screen-reader users can jump between directly. The surprise for many: they're not limited to once per page, and their meaning depends on where they sit.
| Element | Represents |
|---|---|
<header> | intro content for its section (logo, title) |
<nav> | a block of navigation links |
<footer> | closing info (copyright, links) |
<header>...site header...</header> <!-- page-level -->
<article>
<header><h2>Post title</h2></header> <!-- article-level, totally valid -->
...
<footer>Posted by Ann</footer>
</article>Scoping is the key idea: a <header> at page level is the site header, but the same tag inside an <article> is that article's header — the meaning comes from the nesting. You can have many. <nav> is only for major navigation blocks (main menu, pagination) — don't wrap every group of links in it, or the "skip to nav" landmark loses its value. When you have more than one <nav>, label each with aria-label so they're distinguishable.
🏋️ Practical Exercise
- Add a
<header>with a site title. - Put navigation links inside a
<nav>. - Add a
<footer>with copyright text. - Use a
<header>inside an<article>as well. - Add an
aria-labelto distinguish two<nav>s.
🔥 Challenge Exercise
Build a page skeleton using <header>, <nav>, <main>, and <footer>. Put primary navigation in the header’s <nav> and a secondary footer <nav> with legal links. Explain why semantic landmarks help screen readers and how multiple <nav>s should be labeled.
📋 Summary
<header>— introductory content for the page (site header with logo/nav) or for an article/section (title, author, metadata). Multiple headers allowed on one page.<footer>— closing content for the page (copyright, legal links) or for an article (tags, author bio). Multiple footers allowed on one page.<nav>— major navigation blocks (main nav, breadcrumbs, sidebar, pagination). Usearia-labelwhen multiple nav elements appear on the same page.- Site-level header/footer are direct children of
<body>; article-level ones are scoped inside<article>or<section>. - Navigation links inside
<nav>should be structured as an<ul>(unordered list) or<ol>(ordered list for breadcrumbs and steps).
Interview Questions
- What is the purpose of the
<header>element? - Can a page have more than one
<header>or<footer>? - What goes inside a
<nav>element? - How do landmark elements help accessibility?
- How do you distinguish multiple
<nav>elements on a page?
Related Topics
FAQ
No. The <main> element is unique — there should only be one visible <main> per page. It represents the dominant content of the document. However, you can have multiple <header>, <footer>, and <nav> elements — they are scoped to their nearest ancestor and can appear multiple times.
No. Use <nav> for major navigation blocks that users would want to navigate directly to. Footer social media icon links, tag lists on blog posts, or a list of related articles are not necessarily "navigation" in the semantic sense. Over-using <nav> dilutes its meaning and creates too many landmark regions for screen reader users to sort through. A good rule: if someone would call it "navigation" in everyday language, use <nav>.
They serve different purposes. <header> is a container element for introductory content — it can hold many things (logo, navigation, metadata, title). <h1> is a heading element that represents the title of the page or section. A page-level <header> typically contains the <h1>, but they are distinct elements. An article might have both: a <header> element wrapping the <h1>, the date, and the author.
Yes. Adding aria-current="page" to the link pointing to the current page tells screen readers to announce it as the current item. This is important for navigation — without it, a blind user cannot tell which link represents the page they are already on. CSS can also target [aria-current="page"] to apply active styles, making it do double duty for both accessibility and styling.