Skip to content
Hoover Digital Media Learning Platform

Structuring a Tours Page

The homepage introduced the Summit Trail Outfitters site and showed tour previews. The Tours page goes deeper: each tour gets its own full entry with detailed information. This lesson focuses on structuring repeated content patterns using <article> and organizing tour details clearly.

How the Tours page differs from the homepage

Section titled “How the Tours page differs from the homepage”

The homepage uses tour previews — short summaries with links to encourage exploration. The Tours page is the destination. Here, each tour gets:

  • A full title
  • A complete description
  • Structured details (duration, difficulty, price, group size)
  • A booking or inquiry link

The layout pattern repeats for every tour. This is a key feature of the Tours page: it has a consistent structure that can be extended by adding more <article> elements.

The complete Tours page structure

Section titled “The complete Tours page structure”
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Tours — 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>Our Tours</h1>
        <p>Every Summit Trail Outfitters tour is led by a certified guide with deep knowledge of the trail, the ecosystem, and the conditions. Choose the adventure that fits your pace.</p>
      </section>


      <section>
        <h2>Day Hikes</h2>


        <article>
          <img src="images/pine-ridge-loop.jpg" alt="Forested trail through cedar and fir trees on the Pine Ridge Loop">
          <h3>Pine Ridge Loop</h3>
          <p>A classic Pacific Northwest forest loop with panoramic ridge views and old-growth cedar groves. The trail climbs steadily for the first hour, then levels off along the ridge before descending through fern-lined switchbacks.</p>
          <dl>
            <dt>Duration</dt>
            <dd>4 hours</dd>
            <dt>Difficulty</dt>
            <dd>Moderate</dd>
            <dt>Group size</dt>
            <dd>Up to 10</dd>
            <dt>Price</dt>
            <dd>$65 per person</dd>
          </dl>
          <p><a href="contact.html">Book this tour</a></p>
        </article>


        <article>
          <img src="images/river-canyon-trail.jpg" alt="Waterfall cascading through a lush forest canyon on the River Canyon Trail">
          <h3>River Canyon Trail</h3>
          <p>Follow the canyon rim above the Cascade River with two waterfall stops and a lunch break at a riverside overlook. This trail passes through three distinct ecosystems in a single day.</p>
          <dl>
            <dt>Duration</dt>
            <dd>6 hours</dd>
            <dt>Difficulty</dt>
            <dd>Moderate</dd>
            <dt>Group size</dt>
            <dd>Up to 8</dd>
            <dt>Price</dt>
            <dd>$85 per person</dd>
          </dl>
          <p><a href="contact.html">Book this tour</a></p>
        </article>


      </section>


      <section>
        <h2>Full-Day Adventures</h2>


        <article>
          <img src="images/summit-challenge.jpg" alt="Panoramic view from a high mountain ridge on the Summit Challenge">
          <h3>Summit Challenge</h3>
          <p>A demanding ascent to the high ridge — 2,800 feet of elevation gain over nine miles. The payoff is one of the most dramatic views in the Cascades. Participants should be in good physical condition and comfortable with sustained uphill hiking.</p>
          <dl>
            <dt>Duration</dt>
            <dd>Full day (8–9 hours)</dd>
            <dt>Difficulty</dt>
            <dd>Strenuous</dd>
            <dt>Group size</dt>
            <dd>Up to 6</dd>
            <dt>Price</dt>
            <dd>$120 per person</dd>
          </dl>
          <p><a href="contact.html">Book this tour</a></p>
        </article>


        <article>
          <img src="images/wildflower-traverse.jpg" alt="Wildflowers blooming across a high mountain meadow on the Wildflower Traverse">
          <h3>Wildflower Traverse</h3>
          <p>An early-season traverse across a high meadow basin known for its late-June wildflower bloom. The route includes a ridge crossing with views into two river valleys.</p>
          <dl>
            <dt>Duration</dt>
            <dd>Full day (7–8 hours)</dd>
            <dt>Difficulty</dt>
            <dd>Strenuous</dd>
            <dt>Group size</dt>
            <dd>Up to 8</dd>
            <dt>Price</dt>
            <dd>$110 per person</dd>
          </dl>
          <p><a href="contact.html">Book this tour</a></p>
        </article>


      </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>

Tour images

Section titled “Tour images”

Each tour article includes an <img> before the heading. The photo is part of the tour’s content — it shows the landscape, difficulty, and character of the hike — so it belongs in the HTML, not added later by CSS or JavaScript.

<img src="images/pine-ridge-loop.jpg" alt="Forested trail through cedar and fir trees on the Pine Ridge Loop">

Two things to get right on every <img>:

  • src: a path to the file, relative to the HTML document. The images/ folder sits alongside tours.html, so images/pine-ridge-loop.jpg resolves correctly.
  • alt: a text description for screen readers and for when the image fails to load. Describe what is visible — the trail, the landscape, the subject — not just the tour name.

For royalty-free photography, Unsplash has extensive hiking and trail imagery. Download one image per tour, place them in an images/ folder in your project root, and name them to match the tour.

Why <dl> for tour details

Section titled “Why <dl> for tour details”

Tour details (duration, difficulty, price) are name-value pairs. That is exactly what a description list <dl> is designed for. Each <dt> is the term (the label) and each <dd> is the description (the value).

<dl>
  <dt>Duration</dt>
  <dd>4 hours</dd>
  <dt>Difficulty</dt>
  <dd>Moderate</dd>
</dl>

You could also use <ul> for the same data. <dl> is more semantically precise because the data has an explicit label-value relationship. <ul> works for simpler cases where the label and value are combined in one string (“Duration: 4 hours”).

Grouping tours into sections

Section titled “Grouping tours into sections”

The tours are grouped into Day Hikes and Full-Day Adventures using <section>. Each section has an <h2> heading. Each tour inside uses <h3>.

This gives the heading hierarchy:

<h1> Our Tours
  <h2> Day Hikes
    <h3> Pine Ridge Loop
    <h3> River Canyon Trail
  <h2> Full-Day Adventures
    <h3> Summit Challenge
    <h3> Wildflower Traverse

The grouping makes navigation easier and the structure clear. A user scanning the page knows immediately that the tours fall into categories.

Semantic consistency across pages

Section titled “Semantic consistency across pages”

Notice that the <header> and <footer> are identical to index.html. This consistency matters:

  • Users know where to find navigation on every page
  • Screen readers can skip to <main> and know it is always the primary content
  • When CSS is added later, the header and footer style once and apply everywhere

Every page of the Summit Trail Outfitters site will use this same outer shell.

Exercise

Section titled “Exercise”

Open your Summit Trail Outfitters folder in VS Code. Create a new file called tours.html.

  1. Copy the full page structure from this lesson into tours.html.

  2. Source a royalty-free photo for each tour from Unsplash. Save them to an images/ folder in your project root using names that match the tour (e.g. pine-ridge-loop.jpg). Confirm each <img> loads when you open tours.html in the browser.

  3. Add a third category section — name it something appropriate for your version of the site (e.g., “Overnight Trips”, “Sunset Tours”, “Family-Friendly Hikes”).

  4. Inside that section, add at least one <article> for a new tour. Include:

    • An <img> with a descriptive alt
    • An <h3> heading with the tour name
    • A <p> description
    • A <dl> with at least three detail pairs
    • A booking link

  5. Open both index.html and tours.html in your browser. Click the “Tours” link in the homepage navigation — it should navigate to tours.html. Click “Home” from tours.html — it should return.

Your navigation links are now working between real pages.

Recap

Section titled “Recap”
  • The Tours page uses <article> for each individual tour — self-contained entries that could stand independently.
  • <dl> with <dt> and <dd> is the right structure for name-value detail pairs like duration, difficulty, and price.
  • Grouping tours by category with <section> creates a clear heading hierarchy.
  • The <header> and <footer> are identical across pages — consistency in structure is a feature.
  • Each tour article uses an <h3> because it sits inside a section with an <h2>.