header nav main and footer
Structure a page's primary landmarks with semantic tags.
header nav main and footer is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
HTML5 Landmark Elements
HTML5 introduced landmark elements that define page regions:
<header>— introductory content or navigation<nav>— navigation links<main>— the primary unique content<footer>— footer information
They replace generic <div>s with meaningful structure.
The header Element
The <header> element contains introductory content:
<header>
<a href="/" class="logo">
<img src="logo.svg" alt="Company name">
</a>
<nav>...</nav>
<button>Sign In</button>
</header>
<!-- header can appear multiple times: page header, article header -->
<!-- But only one page-level header per page is recommended -->The nav Element
The <nav> element wraps navigation links:
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<!-- Use aria-label to distinguish multiple navs -->
<!-- Not every group of links is a nav — only major navigation -->Multiple nav Elements
A page can have multiple <nav> elements — label each one:
<nav aria-label="Main navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer links">...</nav>
<!-- aria-label tells screen reader users what each nav is for -->
<!-- Screen readers list landmarks — unique labels help navigation -->The main Element
The <main> element marks the primary content unique to this page:
<main id="main-content">
<h1>HTML5 Landmark Elements</h1>
<p>Learn about semantic page structure...</p>
</main>
<!-- Rules:
- Only ONE main element per page
- Should not be a descendant of header, footer, aside, nav
- id="main-content" enables skip links -->
<!-- Assistive tech users jump directly to main -->The footer Element
The <footer> element wraps footer information:
<footer>
<p>© 2025 CoddyKit. All rights reserved.</p>
<nav aria-label="Footer navigation">
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a>
</nav>
</footer>
<!-- footer can appear multiple times: page footer, article footer -->
<!-- Page footer typically has copyright, links, contact -->Page Skeleton
A complete semantic page structure:
<body>
<header>
<a href="/"><img src="logo.svg" alt="Site name"></a>
<nav aria-label="Main">...</nav>
</header>
<main id="main-content">
<h1>Page Title</h1>
<p>Primary content here.</p>
</main>
<aside>Related content</aside>
<footer>
<p>© 2025 Company</p>
</footer>
</body>Skip Navigation Link
Add a skip link for keyboard users to bypass navigation:
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>... navigation ...</header>
<main id="main-content" tabindex="-1">
<h1>Page Heading</h1>
</main>
/* CSS: */
.skip-link {
position: absolute; top: -100%;
background: #0070f3; color: white; padding: 0.5rem;
}
.skip-link:focus { top: 0; }Landmark Roles
HTML5 landmark elements map to ARIA landmark roles:
<header>→role="banner"(page-level only)<nav>→role="navigation"<main>→role="main"<footer>→role="contentinfo"(page-level only)<aside>→role="complementary"
header and footer Inside Sections
header and footer can appear inside <article> and <section>:
<article>
<header>
<h2>Article Title</h2>
<p>By Jane Smith | March 2024</p>
</header>
<p>Article content...</p>
<footer>
<p>Tags: HTML, CSS</p>
</footer>
</article>
<!-- In this context, header/footer are NOT banner/contentinfo roles -->
<!-- They are generic sections within the article -->Common Mistakes
Avoid these semantic landmark mistakes:
- Using
<nav>for every group of links - Multiple
<main>elements on one page - Putting
<main>inside<header>or<nav> - Using
<footer>for non-footer content
Quick Check
How many main elements should a page have?
Recap: header nav main footer
Landmark element essentials:
<header>— introductory content; can repeat per section<nav>— major navigation; label with aria-label if multiple<main>— unique primary content; exactly one per page<footer>— footer content; can repeat per section- Add skip link targeting
id="main-content"
Frequently asked questions
Is the “header nav main and footer” lesson free?
Yes — the full text of “header nav main and footer” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “header nav main and footer”?
Structure a page's primary landmarks with semantic tags. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “header nav main and footer” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- header nav main and footer
- The article Element Self-Contained Content
- The section Element vs div
- Time address and mark