Organizing a real multi-page site: file structure and the Subscriptions page
Every part so far has built or extended one file — index.html. A real site is more than one page, and this part covers both the real second and third pages this project needs, and the file organization that keeps a genuinely multi-page site maintainable.
A real, practical file structure
bright-leaf-coffee/
├── index.html
├── subscriptions/
│ └── index.html
├── contact/
│ └── index.html
├── images/
│ ├── logo.svg
│ ├── gift-box-400.jpg
│ └── ethiopian-light-roast-400.jpg
├── videos/
│ └── roasting-process.mp4
├── favicon.ico
└── icon.svgUsing a folder with an index.html inside it (subscriptions/index.html) rather than a flat subscriptions.html file is what produces the clean URL /subscriptions instead of /subscriptions.html once the site is actually deployed — most real static hosts automatically serve a folder's index.html for a request to that folder's path, covered directly in part 22's deployment coverage.
The real Subscriptions page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Subscriptions — Bright Leaf Coffee</title>
<meta
name="description"
content="Compare Bright Leaf Coffee's Gift, Monthly, and Double Bag subscriptions — pricing, shipping, and what's included."
/>
<link rel="canonical" href="https://brightleafcoffee.com/subscriptions" />
</head>
<body>
<header>
<img src="/images/logo.svg" alt="Bright Leaf Coffee" width="140" height="40" />
<nav>
<a href="/">Home</a>
<a href="/subscriptions">Subscriptions</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>Compare Our Subscriptions</h1>
<table>
<caption>Compare Bright Leaf Coffee subscription plans</caption>
<thead>
<tr>
<th scope="col">Plan</th>
<th scope="col">Price</th>
<th scope="col">Bags per month</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Gift Subscription</th>
<td>$18/mo</td>
<td>1</td>
</tr>
<tr>
<th scope="row">Monthly Subscription</th>
<td>$16/mo</td>
<td>1</td>
</tr>
</tbody>
</table>
</main>
<footer>
<p>© 2026 Bright Leaf Coffee</p>
</footer>
</body>
</html>Notice every internal href — in the nav, and the canonical URL — uses the same real relative-path and absolute-canonical-URL discipline established in parts 5 and 14, and the page reuses the exact <table> structure built in part 9, now as genuine, real production content rather than an isolated example.
Why every page needs its own real head content
Homepage title: "Bright Leaf Coffee — Small-batch coffee, roasted weekly"
Subscriptions title: "Subscriptions — Bright Leaf Coffee"Each real page gets its own genuinely specific <title>, <meta description>, and canonical URL — never copied unchanged from the homepage, exactly the mistake flagged in part 20's roundup. A search engine treats each page as its own real, independent result; a title and description that accurately describe this specific page's content is what earns the right click for the right search, not a generic site-wide description repeated everywhere.
A real, hand-built HTML sitemap
<h1>Site Map</h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/subscriptions">Subscriptions</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>This is genuinely different from an XML sitemap (a separate, machine-readable file search engines fetch directly) — an HTML sitemap page is a real, visible page for actual visitors, useful specifically on a larger real site where the main navigation alone doesn't surface every page. For a site this size, it's a modest but real, honest addition — worth knowing as a pattern even where the main nav already covers everything.
Consistent internal navigation — the exact same <nav> markup repeated identically across the homepage and the Subscriptions page above — isn't just about a visitor recognizing the site is trustworthy. It's what lets search engines crawl the entire real site by simply following real links from page to page, the same fundamental mechanism the SEO series' own crawlability guidance covers directly.
Next, and last: publishing the real site — bringing every page together and covering the real basics of getting a finished, hand-built HTML site actually live.