Structuring a Blog Index Page

The blog index page (blog.html) is the listing page — the page visitors land on when they click “Blog” in the navigation. It shows a collection of post previews, each linking to a full article. This lesson focuses on how to structure repeating content cleanly and consistently.

How the blog index differs from other pages

Every other STO page has a single primary purpose:

index.html — introduce the company and its tours
tours.html — list the tour offerings in full detail
blog-article.html — present one complete article

The blog index (blog.html) is a listing page. Its job is to present multiple article previews and let visitors choose which one to read. Each preview is a self-contained entry, which makes <article> the right element — even in preview form, each post is independently meaningful content.

The blog index page structure

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Blog — 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" aria-current="page">Blog</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>

      <section>
        <h1>Trail Notes &amp; Gear Guides</h1>
        <p>Advice, stories, and guides from the Summit Trail Outfitters team.</p>
      </section>

      <section>

        <article>
          <h2><a href="blog-article.html">How to Choose the Right Hiking Boot</a></h2>
          <p>Published <time datetime="2026-05-15">May 15, 2026</time> by Elena Park</p>
          <p>The wrong boot is the most common reason a great trail day turns into a bad one. Here is how to choose the right footwear for the terrain and conditions.</p>
          <a href="blog-article.html">Read more</a>
        </article>

        <article>
          <h2><a href="blog-article.html">What to Pack for a Day Hike</a></h2>
          <p>Published <time datetime="2026-04-22">April 22, 2026</time> by Marcus Webb</p>
          <p>A day hike does not require much — but forgetting the right item can turn a pleasant outing into a stressful one. Our guide covers the ten essentials and what to skip.</p>
          <a href="blog-article.html">Read more</a>
        </article>

        <article>
          <h2><a href="blog-article.html">Trail Etiquette: What Every Hiker Should Know</a></h2>
          <p>Published <time datetime="2026-03-10">March 10, 2026</time> by Elena Park</p>
          <p>Yield to uphill hikers. Pack out your trash. Stay on the trail. A few simple habits make every hike better for everyone.</p>
          <a href="blog-article.html">Read more</a>
        </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>

How this page is structured

<section> for the page header area — the page intro (<h1> and tagline paragraph) sits in its own <section> inside <main>. This separates the page title from the article list.

<article> for each post preview — each preview is an independently meaningful piece of content. Using <article> for previews (not just full posts) is correct: a preview that links to the full post still describes a distinct piece of content.

<time> for dates — the <time> element marks up the publication date with a machine-readable datetime attribute (YYYY-MM-DD). The text the user sees (“May 15, 2026”) can be in any format you choose — the datetime attribute is what browsers and search engines actually parse.

aria-current="page" — on the blog nav link, this attribute tells screen readers that this link represents the current page. The page <title> and aria-current together ensure assistive technology users always know where they are. You will learn more about this in Module 10.

All previews link to blog-article.html — for now, every “Read more” link points to the single article page you will build in the next lesson. In a real site each article would have its own URL.

The heading hierarchy

<h1> Trail Notes & Gear Guides   (page title)
  <h2> How to Choose the Right Hiking Boot   (article preview)
  <h2> What to Pack for a Day Hike
  <h2> Trail Etiquette: What Every Hiker Should Know

Each article preview uses <h2>. The article heading links directly to the full post — wrapping a heading in an <a> element is valid and common on listing pages.

Exercise

Create blog.html in your Summit Trail Outfitters folder.

Copy the full structure from this lesson into the file.
The <time> element is new. For each article, confirm the datetime attribute uses the format YYYY-MM-DD and the visible text is a human-readable date. They do not need to match in format — the datetime attribute is for machines, the text is for people.
Add a fourth article preview of your own. Give it a title, a fictional author and date, and a one or two sentence summary. Link it to blog-article.html.
Open blog.html in your browser. Click each “Read more” link and confirm it navigates to blog-article.html.
Open index.html and tours.html and confirm their <nav> elements include a working link to blog.html.

Recap

blog.html is a listing page — its job is to show post previews and let visitors choose what to read.
<article> is the right element for each preview, even in abbreviated form. Each preview is independently meaningful content.
<time datetime="YYYY-MM-DD"> marks up dates with a machine-readable attribute. The visible text can be in any format.
aria-current="page" on a nav link identifies the current page to assistive technology.
Wrapping a heading in <a> is valid on listing pages — the heading text becomes the link label.

Lesson 05 builds the full blog article page — the destination when a visitor clicks “Read more.”