🏗 Phase 6 · Semantic HTML🟢 BeginnerModule 07

Header & Footer

⏱ 16 min read📖 4 sections🧩 5-question quiz

Course Progress66% complete

<header> and <footer> are the bookends of content. They can appear at the page level — wrapping the site-wide branding and copyright — or at the section/article level, giving each chunk of content its own introductory and closing metadata. Understanding this dual scope is the key to using them correctly.

Section 1

header — Page vs Section Scope

A <header> at the top-level (direct child of <body>) becomes the site header — it gets the ARIA landmark role banner automatically, which screen readers expose as "banner landmark". A <header> inside an <article> or <section> is scoped to that element — it's just that content's introductory area, not the site header.

Page-level header (role=banner)

<body>
  <header>  <!-- site header -->
    <a href="/">
      <img src="logo.svg"
           alt="BitWithBite">
    </a>
    <nav>...</nav>
  </header>
  <main>...</main>
</body>

Article-level header (no banner role)

<article>
  <header>  <!-- article intro -->
    <h1>Post Title</h1>
    <p>
      By <address>Jane</address>
      on <time
        datetime="2025-06-21">
        June 21, 2025
      </time>
    </p>
  </header>
  <p>Article body...</p>
</article>

What belongs in a site header? Logo, site name, primary navigation, search bar, language switcher, login/signup link — any content that appears on every page and identifies the site.

Section 2

footer — Same Dual Scope

A page-level <footer> (direct child of body) gets the ARIA landmark role contentinfo. It's the place for copyright notices, secondary navigation, legal links, social links, and contact info. An article or section footer holds metadata about that specific content — tags, author bio, related posts links.

HTMLPage footer — complete example

<footer>
  <div class="footer-grid">

    <div>
      <strong>BitWithBite</strong>
      <p>Learn coding one bite at a time.</p>
    </div>

    <nav aria-label="Footer navigation">
      <ul>
        <li><a href="/courses">Courses</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/privacy">Privacy</a></li>
      </ul>
    </nav>

    <address>
      <a href="mailto:hello@bitwithbite.com">
        hello@bitwithbite.com
      </a>
    </address>

  </div>
  <p>&copy; <time datetime="2025">2025</time> BitWithBite</p>
</footer>

HTMLArticle footer

<article>
  <header>
    <h1>CSS Grid Complete Guide</h1>
    <time datetime="2025-06-21">21 June 2025</time>
  </header>

  <p>Article content...</p>

  <footer>  <!-- Article-scoped footer -->
    <p>Tags:
      <a href="/tag/css">CSS</a>,
      <a href="/tag/layout">Layout</a>
    </p>
    <address>
      Written by <a href="/author/jane">Jane Smith</a>
    </address>
  </footer>
</article>

Section 3

ARIA Landmark Roles

Browsers automatically assign ARIA landmark roles to semantic elements. Screen reader users can jump directly between landmarks — like keyboard shortcuts for page regions.

Element	Auto ARIA role	Exception
`<header>` (body child)	`banner`	Inside article/section: no landmark role
`<footer>` (body child)	`contentinfo`	Inside article/section: no landmark role
`<nav>`	`navigation`	Add aria-label to distinguish multiple navs
`<main>`	`main`	Only one per page
`<aside>`	`complementary`	—
`<section>`	`region`	Only when it has an accessible name (aria-label or aria-labelledby)

💡

Multiple navs need aria-label

If your page has both a main nav and a footer nav, give each a distinct aria-label: <nav aria-label="Main navigation"> and <nav aria-label="Footer navigation">. Screen readers announce these labels, letting users jump to the right one.

Section 4

Common Patterns Checklist

✅Page header contains logo, site name, primary nav — consistent across all pages
✅Logo is a link to the home page (wrapped in <a href="/">)
✅Article header contains the post title (h1), author, and publish date (<time>)
✅Page footer contains copyright, privacy/legal links, secondary nav, contact info
✅Copyright year uses <time datetime="YYYY"> for machine-readable year
✅Multiple nav elements each have unique aria-label attributes
✅Contact email in footer uses <address> element
❌Never nest a <header> inside another <header>
❌Never put <main> inside <header> or <footer>
❌Don't use <header> just for styling a decorative hero image — use a <section> or <div>

🧩 Quick Check — Lesson 23

5 questions · instant feedback

1. What ARIA landmark role does a page-level <header> (direct child of body) get automatically?

2. A <header> inside an <article> — does it get the "banner" ARIA role?

3. What element should wrap a contact email address in a footer?

4. Your page has a main navigation in the header and a secondary navigation in the footer. What should you add to distinguish them for screen readers?

5. What ARIA role does a page-level <footer> get automatically?

🏆

Quiz Complete!

Header and footer done! Next: nav, main, and aside.

🏆

Lesson 23 Challenge

Build exercise · 20 min

Build a complete site header and footer for a tech blog.

Header must include:
- Logo image (use a placeholder) linked to the home page
- Site name "DevNotes" as a heading inside the link
- A <nav> with at least 4 links (Home, Articles, Tutorials, About) in a list
- A search form (input type="search" + button)
- aria-label="Main navigation" on the nav

Footer must include:
- A 3-column grid: Brand info | Navigation links | Contact
- Navigation links column has a <nav aria-label="Footer navigation">
- Contact column uses <address> wrapping an email link
- Copyright line using <time datetime="2025">2025</time>

Style both with CSS — sticky header, dark footer background, responsive single-column on mobile.

Show hints

header { position: sticky; top: 0; z-index: 100; } for a sticky header
Footer grid: display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem;
@media(max-width: 600px) { footer .grid { grid-template-columns: 1fr; } }
Logo + site name in one <a>: <a href="/"><img...> <span>DevNotes</span></a>

← Semantic HTML

Lesson 23 of 35

Nav, Main & Aside →