HTML · Quick Reference

Lesson 23 — Header & Footer Cheat Sheet

HTML

In one line: 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 "b...

Key Ideas

1header — 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 ex...

2footer — 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, so...

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

Code Examples

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

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

<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...