Module 4: Structure and Semantics · Lesson 2 of 5
HTML header, nav, main and footer Tags Explained
All lessons in Module 4
- div and span
- Header, Nav, Main, Footer
- Article, Section, Aside
- Fix the Div Soup
- Project: Blog Page
Goal: Mark up a page's big regions with header, nav, main and footer.
Learn
Most websites share one floor plan: a top bar, a menu, the main content and a strip at the bottom. For each part HTML has a semantic tag, meaning a tag that says what its content is.
<header>is the intro area, usually with the logo or site name.<nav>holds a block of main navigation links.<main>wraps the content that is unique to this page. A page gets one.<footer>carries closing info such as copyright and contact details.
On screen they look exactly like a <div>. The difference is meaning. Screen readers list them as landmarks (opens in a new tab), so users can jump straight to the menu or the content, and search engines can tell which part is the real content.
The short version
<header>,<nav>,<main>and<footer>name a page's regions by their content. How they look is up to CSS.- A page gets one
<main>, and it never goes inside a header, footer, nav, article or aside. - Screen readers list these regions as landmarks, so users can jump straight to the menu or the content.
<nav>wraps major navigation blocks. Two small links in the footer can do without one.
Example
<header>
<h1>Moon Bikes</h1>
<nav>
<a href="#shop">Shop</a>
<a href="#repairs">Repairs</a>
</nav>
</header>
<main>
<h2>Ride further</h2>
<p>Electric bikes built for steep hills.</p>
</main>
<footer>
<p>© 2026 Moon Bikes</p>
</footer>Your task
Crumb Bakery's homepage is a heap of loose elements. Give it a floor plan:
- Wrap the
<h1>and the three links in a<header>. - Inside the header, wrap the three links in a
<nav>. - Wrap the
<h2>and the baking paragraph in one<main>. - Wrap the copyright paragraph in a
<footer>.
The three regions sit side by side, and none of them goes inside another. Afterwards, have a look at some free HTML5 templates (opens in a new tab). Most use this exact floor plan, so they are good study material.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<body>
<head>
<h1>Crumb Bakery</h1>
</head>
</body>Right
<body>
<header>
<h1>Crumb Bakery</h1>
</header>
</body>The head is the hidden metadata area above the body, and the visible strip at the top of the page is a header.
Wrong
<main>
<h2>Fresh bread</h2>
</main>
<main>
<h2>Opening hours</h2>
</main>Right
<main>
<section>
<h2>Fresh bread</h2>
</section>
<section>
<h2>Opening hours</h2>
</section>
</main>There is only one main content area per page, so divide it into sections and keep a single main.
Go deeper
Under the hood, browsers give each region an accessibility role, as set out in the W3C HTML Accessibility API Mappings (opens in a new tab). A page-level <header> becomes the banner landmark, <nav> becomes navigation, <main> becomes main and a page-level <footer> becomes contentinfo. Screen readers build a landmarks menu from these roles. So the tags do real work, even though they look identical to a div.
Put a header or footer inside an <article> or <section> and it stops being a page landmark. It belongs to that piece only. A blog post can then have its own header with the title and date, as in Article, Section, Aside.
Two navigation blocks on one page, say a main menu and a table of contents? Name each one so users can tell them apart: <nav aria-label="Main">.
Many sites put a "Skip to content" link first in the body, pointing at <main id="content">. A keyboard user presses Tab once and skips the whole menu. It is an ordinary page jump, like the ones in New Tabs and Page Jumps.
Frequently asked questions
What is the difference between head and header in HTML?
The head is hidden; the header is visible. <head> comes before <body> and holds information about the page, such as the <title> and meta tags. <header> lives inside the body as a region you can see, usually with the logo, site name and main menu. A page has exactly one head, and it may have several headers.
Can a page have more than one header or footer?
Yes. Besides the page's own header and footer, every <article> or <section> can have its own pair. A blog post might have a header with the title and date and a footer with its tags. The HTML standard's rules for main (opens in a new tab) limit only <main> to one visible element per page.
Do header, nav, main and footer help SEO?
There is no direct ranking boost. What they do is make the page structure explicit, so search engines and other tools can separate the unique content in <main> from the menu and footer repeated around it. The certain gain is accessibility. Screen reader users can jump between these regions with a single key.
