The Regions of a Page in JavaScript

Most pages have three big parts. The header opens the page: the name of the site and its menu. The main part holds what this page is about. The footer closes it with the small print, like the copyright. HTML has a tag for each region, and wrapping your content in them tells browsers, screen readers and search engines which part is which.

Inside the header, a nav marks a group of links for moving around the site. A page can have more than one, so aria-label gives each one a name that screen readers say out loud. A help page could have its own menu like this:

<nav aria-label="Help topics">
  <a href="/help/returns.html">Returns</a>
  <a href="/help/payment.html">Payment</a>
</nav>

The check prints each region as a box, with what it holds indented under it. Your page already has its main. When you are done, it must print:

header
  heading 1: Corner Shop
  nav "Main"
    link: Your cart -> /cart.html
    link: See opening hours -> #hours
main
  text: Mugs, lamps, plants and more, a short walk from home.
  …
  link: How we deliver -> https://example.com/delivery
footer
  text: © 2026 Corner Shop

Your task: above main, add a header with the h1 Corner Shop and a nav with aria-label="Main" holding two links: Your cart to /cart.html and See opening hours to #hours. Under main, add a footer with a paragraph © 2026 Corner Shop.

Assignment
Follow the Coding Tutorial to wrap the shop's page in its regions: a header with the name and the menu, the main content, and a footer.

Hint
The regions sit side by side inside body: header, then main, then footer. In a nav, the links stand on their own, without a p around them.