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>📋 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).
Frequently Asked Questions
Can I have more than one main element on a page?
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.
Should every group of links be in a nav element?
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>.
What is the difference between header and h1?
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.
Does adding aria-current="page" to nav links help?
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.