Capstone: Multi-Page Semantic Site Completion

You have built three pages: index.html, tours.html, and blog-article.html. This lesson completes the Summit Trail Outfitters site by adding about.html and contact.html, and ensuring all pages follow a consistent semantic structure.

Why consistency across pages matters

Every page of a well-built site shares:

The same <header> with identical navigation
The same <footer> with identical links
A consistent heading hierarchy starting from <h1>
The same semantic patterns for similar content

When structure is consistent:

Users always know where to find navigation
Screen readers can skip to <main> and rely on it being the primary content
CSS can be written once and applied across the entire site
Adding new pages follows an established pattern, not a guess

The About page

The About page introduces the company — its history, team, and values. It is primarily text content organized into sections.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>About — Summit Trail Outfitters</title>
  </head>
  <body>

    <header>
      <p>Summit Trail Outfitters</p>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="tours.html">Tours</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="blog.html">Blog</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>

      <section>
        <h1>About Summit Trail Outfitters</h1>
        <p>Founded in 2012 by two former wilderness guides, Summit Trail Outfitters was built on a single belief: that access to the outdoors should be safe, sustainable, and unforgettable. We operate in the Cascade Range, the Olympic Peninsula, and the Columbia River Gorge.</p>
      </section>

      <section>
        <h2>Our Story</h2>
        <p>After years of guiding separately, founders Ava Chen and Marcus Webb joined forces to create a company that prioritized small group sizes, certified guides, and Leave No Trace principles from day one.</p>
        <p>What began with three tours in a single valley has grown to more than forty routes across the Pacific Northwest — but the core commitment has never changed.</p>
      </section>

      <section>
        <h2>Our Guides</h2>
        <p>Every Summit Trail Outfitters guide holds Wilderness First Responder certification and completes annual recertification in navigation, weather reading, and group management.</p>
        <p>Our guides do not just know the trails — they know the ecosystems, the history, and the wildlife. Every tour is also a lesson in place.</p>
      </section>

      <section>
        <h2>Our Commitment</h2>
        <ul>
          <li>Maximum group sizes enforced on every tour</li>
          <li>Leave No Trace training for all participants</li>
          <li>Trail restoration volunteer days each spring</li>
          <li>Carbon offset on all company travel</li>
        </ul>
      </section>

    </main>

    <footer>
      <p>&copy; 2026 Summit Trail Outfitters</p>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="tours.html">Tours</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </footer>

  </body>
</html>

The Contact page

The Contact page gives users a way to reach the company. It combines a form with basic contact information.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Contact — Summit Trail Outfitters</title>
  </head>
  <body>

    <header>
      <p>Summit Trail Outfitters</p>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="tours.html">Tours</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="blog.html">Blog</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>

      <section>
        <h1>Contact Us</h1>
        <p>Questions about a tour? Ready to book? Use the form below or reach us directly.</p>
      </section>

      <section>
        <h2>Send a Message</h2>
        <form>
          <label for="contact-name">Your name</label>
          <input type="text" id="contact-name" name="name" required placeholder="e.g. Jane Smith">

          <label for="contact-email">Email address</label>
          <input type="email" id="contact-email" name="email" required placeholder="you@example.com">

          <label for="contact-tour">Tour you are interested in</label>
          <select id="contact-tour" name="tour">
            <option value="" disabled selected>Select a tour...</option>
            <option value="pine-ridge">Pine Ridge Loop</option>
            <option value="river-canyon">River Canyon Trail</option>
            <option value="summit-challenge">Summit Challenge</option>
            <option value="wildflower">Wildflower Traverse</option>
            <option value="other">Other / General inquiry</option>
          </select>

          <label for="contact-message">Message</label>
          <textarea id="contact-message" name="message" required></textarea>

          <button type="submit">Send Message</button>
        </form>
      </section>

      <section>
        <h2>Other Ways to Reach Us</h2>
        <dl>
          <dt>Email</dt>
          <dd>hello@summittrailoutfitters.com</dd>
          <dt>Phone</dt>
          <dd>(503) 555-0182</dd>
          <dt>Office hours</dt>
          <dd>Monday–Friday, 9am–5pm Pacific</dd>
        </dl>
      </section>

    </main>

    <footer>
      <p>&copy; 2026 Summit Trail Outfitters</p>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="tours.html">Tours</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </footer>

  </body>
</html>

The complete site map

At the end of this module, the Summit Trail Outfitters site has these pages:

Page	File	Status
Homepage	`index.html`	Built in Lesson 02
Tours	`tours.html`	Built in Lesson 03
Blog Article	`blog-article.html`	Built in Lesson 04
About	`about.html`	Built in this lesson
Contact	`contact.html`	Built in this lesson
Blog index	`blog.html`	Placeholder — link works, page is empty

blog.html is referenced in navigation but not built yet. That is fine. You can create an empty file with just the <!DOCTYPE> and <title> to prevent a 404, or leave the link pointing to a file you will fill in later.

Capstone checklist

Before moving to Module 09, verify each page against this list:

Structure

Every page has <header>, <main>, and <footer>
Navigation is identical across all pages
Each page has exactly one <h1>
No heading levels are skipped

Semantics

<section> is used for thematic grouping with a heading
<article> is used for self-contained content (tours, blog post, testimonials)
<aside> is used on the blog article page for related links
<nav> wraps all navigation lists

Forms (Contact and Newsletter)

Every <input> has an associated <label> with matching for and id
Required fields have required
Submit button uses <button type="submit">

Media (Blog Article)

<img> has a descriptive alt attribute

General

Indentation is consistent and readable
No inline styles or style attributes

Exercise

Create about.html and contact.html in your Summit Trail Outfitters folder using the structures from this lesson.
Create an empty blog.html with at least a <title> so the link does not 404.
Open index.html in your browser and click through every navigation link. Confirm each page loads.
Work through the capstone checklist above on each of your pages.
Fix anything the checklist flags before moving on.

Module 08 Recap

Content modeling: plan what belongs on a page before writing HTML.
Every page uses the same <header>, <nav>, <main>, and <footer> shell — consistency is a feature.
<section> groups thematic content and always has a heading.
<article> is for self-contained items: tours, blog posts, testimonials, guest quotes.
<aside> holds related but secondary content — not the main focus of the page.
Heading hierarchy must be valid across every page: one <h1>, no skipped levels.
The Summit Trail Outfitters site is now a five-page HTML site ready for metadata (Module 09) and accessibility improvements (Module 10) before CSS begins.