HTML — Page Structure & Navigation

C1 — Building page structure and navigation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>GreenLeaf Organic Foods</title>
</head>
<body>
  <header>
    <h1>GreenLeaf Organic Foods</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="products.html">Products</a>
      <a href="about.html">About</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="contact">
      <h2>Get in touch</h2>
    </section>
  </main>

  <footer>
    <p>&copy; 2027 GreenLeaf Organic Foods</p>
  </footer>
</body>
</html>

Menus

The <nav> block above is a menu — a menu is simply a grouped, ordered set of links a visitor uses to get around the site. What makes it work as a menu rather than just a pile of links: every page the site map (Lesson 7) says the site needs is represented once, in a consistent order, on every page — so a visitor always finds the same menu in the same place no matter which page they're on.

Internal vs external links, and anchors

• Internal links (href="products.html") point to another page within your own site.
• External links (href="https://example.com") point to a different site entirely.
• Anchors (href="#contact") jump to a specific element on the current page, matched by its id.

Always close your tags

Every element opened above is explicitly closed (<nav>...</nav>, <footer>...</footer>) — this isn't optional. Some browsers will try to guess what you meant if you leave a tag unclosed, but different browsers guess differently, which is exactly how a page ends up looking fine on your machine and broken on someone else's. Get into the habit of closing every tag you open from this lesson onward.

Task

Using the site map you finalised in PSAB Task 1, build the linked HTML page structure for your whole site — every page and its navigation should be in place before you move on to content.