Challenge 2: Add Landmark Structure to a Div-Only Page — Possible Solution
====================================================================

<!-- Original (div-only) -->
<!--
<div class="top-nav">...</div>
<div class="main-content">...</div>
<div class="footer">...</div>
-->

<!-- Fixed, using landmark elements -->
<header>
  <nav class="top-nav">...</nav>
</header>

<main class="main-content">
  ...
</main>

<footer class="footer">
  ...
</footer>

WHY THIS WORKS
--------------
- Each div is replaced with the element matching its ACTUAL landmark
  role from the chapter's own table: the navigation div becomes <nav>
  (navigation), the main content div becomes <main> (main), and the
  footer div becomes <footer> (contentinfo) — the class names are kept
  unchanged so any existing CSS styling continues to apply exactly as
  before.
- <nav> is deliberately wrapped inside a <header> here, since top-of-page
  navigation commonly sits within a page's banner region — <header>
  itself maps to the "banner" landmark from the chapter's table, giving
  a screen reader user TWO distinct, correctly nested landmarks (banner
  containing navigation) rather than just one.
- With this structure in place, a screen reader user can now pull up
  the page's list of landmarks and jump directly to "main," skipping
  the navigation entirely if they've already used the site before and
  don't need to hear it again — this is exactly the "genuinely powerful
  shortcut" the chapter describes, and it simply did not exist at all
  when everything was a generic, semantically meaningless <div>.
- Only ONE <main> element should exist per page — using this exact
  element for the actual primary content (not just an arbitrarily
  chosen container) is what makes the "jump to main content" landmark
  shortcut meaningful and unambiguous; having multiple <main> elements,
  or using it for something that isn't really the page's core content,
  would confuse that navigation shortcut rather than support it.