Building the Homepage Semantic Structure

In Lesson 01 you planned the homepage content. In this lesson you write the HTML. The goal is a complete, semantically correct structure with no styling — just clean, readable markup that communicates what each part of the page is.

Translating the outline into HTML

The homepage has eight content regions. Each maps to one or more semantic elements. Here is the full structure you will build:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>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>Your Next Adventure Starts Here</h1>
        <p>Summit Trail Outfitters leads guided hiking and outdoor adventure tours across the Pacific Northwest. Small groups. Experienced guides. Unforgettable terrain.</p>
        <p><a href="tours.html">Browse Tours</a></p>
      </section>

      <section>
        <h2>Popular Tours</h2>
        <article>
          <h3>Pine Ridge Loop</h3>
          <p>A classic forest loop with panoramic ridge views. Suitable for most fitness levels.</p>
          <ul>
            <li>Duration: 4 hours</li>
            <li>Difficulty: Moderate</li>
          </ul>
          <p><a href="tours.html">View Tour</a></p>
        </article>
        <article>
          <h3>River Canyon Trail</h3>
          <p>Follow the canyon rim above the Cascade River with waterfall stops along the way.</p>
          <ul>
            <li>Duration: 6 hours</li>
            <li>Difficulty: Moderate</li>
          </ul>
          <p><a href="tours.html">View Tour</a></p>
        </article>
        <article>
          <h3>Summit Challenge</h3>
          <p>A demanding ascent to the high ridge — rewarded with one of the best views in the region.</p>
          <ul>
            <li>Duration: Full day</li>
            <li>Difficulty: Strenuous</li>
          </ul>
          <p><a href="tours.html">View Tour</a></p>
        </article>
      </section>

      <section>
        <h2>Who We Are</h2>
        <p>Founded in 2012, Summit Trail Outfitters has guided thousands of hikers through the most spectacular landscapes in the Pacific Northwest. Safety, sustainability, and an unforgettable experience are at the core of everything we do.</p>
        <p><a href="about.html">Learn More</a></p>
      </section>

      <section>
        <h2>What Our Guests Say</h2>
        <article>
          <blockquote>
            <p>The Pine Ridge Loop was the highlight of our trip. Our guide knew every plant and bird on the trail.</p>
          </blockquote>
          <p>— Maya R., Portland</p>
        </article>
        <article>
          <blockquote>
            <p>I did the Summit Challenge last fall. Hard, but completely worth it. Already booked again for next year.</p>
          </blockquote>
          <p>— James T., Seattle</p>
        </article>
      </section>

      <section>
        <h2>Stay in the Loop</h2>
        <p>Get trail updates, new tour announcements, and seasonal guides delivered to your inbox.</p>
        <form>
          <label for="newsletter-email">Email address</label>
          <input type="email" id="newsletter-email" name="email" required placeholder="you@example.com">
          <button type="submit">Subscribe</button>
        </form>
      </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>

What each element is doing

<header> — the page-level header. Contains the site name and navigation. Appears on every page.

<nav> + <ul> — navigation as a list. Using a list makes the structure machine-readable. Both the main nav (in the header) and the footer nav use this pattern.

<main> — the primary page content. There is exactly one <main> per page.

<section> — a thematic grouping. Each section on this page has a distinct purpose and its own heading. The hero section uses <h1> because it is the primary page heading. All other section headings are <h2>.

<article> inside Featured Tours — each tour preview is self-contained. It could be moved to the Tours page or an email and still make sense. That is the test for <article>.

<article> inside Testimonials — each guest quote is also self-contained and independent. Same rule applies.

<footer> — the page-level footer. Contains copyright and quick links. Appears on every page.

Why the site name is a `<p>`, not `<h1>`

The <h1> on this page is the hero headline — “Your Next Adventure Starts Here.” That is the primary heading of the page content.

The site name in the <header> is a brand identifier. It is not a document heading. Using a <p> here keeps the heading hierarchy clean. In a real project it might be a logo <img> inside an <a>.

Heading hierarchy check

<h1> Your Next Adventure Starts Here (hero)
<h2> Popular Tours
  <h3> Pine Ridge Loop
  <h3> River Canyon Trail
  <h3> Summit Challenge
<h2> Who We Are
<h2> What Our Guests Say
<h2> Stay in the Loop

No levels are skipped. Every heading nests correctly under the one above it.

Exercise

Create a new folder for the Summit Trail Outfitters project. In VS Code, create index.html inside that folder.

Copy the structure from this lesson into index.html.
Open index.html in your browser. You will see plain text and links with no styling — that is exactly right.
Add one more section to <main>: a Gear Tips section with an <h2> heading, a short paragraph, and a <ul> with two or three quick gear tips. Place it between the About Preview section and the Testimonials section.

Your new section should follow the same pattern as the others:

<section>
  <h2>Gear Tips</h2>
  <p>Pack smart and trail smart. A few essentials make the difference between a good day and a great one.</p>
  <ul>
    <li>Bring more water than you think you need</li>
    <li>Wear wool or synthetic — never cotton</li>
    <li>Always carry a map even if you have a phone</li>
  </ul>
</section>

Check the heading hierarchy in your updated file. Every <h2> should sit at the same level. No <h3> should appear outside a parent section that has an <h2>.

Recap

Translate each content region from your outline to the correct semantic element.
<header> and <footer> frame the page. <main> holds the primary content.
<section> groups thematic content and always has a heading.
<article> is for self-contained items that could stand independently.
The site name in the header is not a document heading — it is a brand identifier.
Check heading hierarchy before you move on: no skipped levels.