Structuring a Blog Article Page

The blog article page introduces a different structural challenge: long-form content with multiple sections, an author byline, embedded media, and related content alongside the main article. This lesson shows how semantic HTML handles each of these.

The blog article page structure

A blog article page has one primary piece of content — the article itself — plus supporting elements around it. The structure looks like this:

Page <header> and <nav> (same as every page)
<main> containing:
- A single <article> (the blog post)
  - <header> inside the article (title, author, date)
  - Multiple <section> elements (the body sections)
  - At least one <img> with alt
  - <footer> inside the article (optional — tags, share links)
- An <aside> (related content)
Page <footer> (same as every page)

The complete blog article page

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>How to Choose the Right Hiking Boot — Summit Trail Outfitters Blog</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>

      <article>

        <header>
          <h1>How to Choose the Right Hiking Boot</h1>
          <p>By <strong>Elena Park</strong> — May 15, 2026</p>
        </header>

        <img src="images/hiking-boots.jpg" alt="Three pairs of hiking boots arranged on a wooden surface" width="800" height="450">

        <section>
          <h2>Why boot choice matters</h2>
          <p>The wrong boot is the most common reason a great trail day turns into a bad one. Blisters, rolled ankles, and wet feet are almost always avoidable — with the right footwear for the terrain and conditions.</p>
          <p>This guide walks you through the key decisions: cut, sole, waterproofing, and fit. By the end, you will know what to look for and what questions to ask at the gear shop.</p>
        </section>

        <section>
          <h2>Boot cut: low, mid, or high</h2>
          <p>Cut determines ankle support. The right choice depends on the terrain and how much weight you carry.</p>
          <ul>
            <li><strong>Low cut</strong> — light, fast, good for smooth trails and day hikes with a light pack.</li>
            <li><strong>Mid cut</strong> — the most versatile option. Moderate ankle support for varied terrain.</li>
            <li><strong>High cut</strong> — maximum support for off-trail travel, heavy packs, or rocky terrain.</li>
          </ul>
          <p>For most Summit Trail Outfitters tours, a mid-cut boot is the best starting point.</p>
        </section>

        <section>
          <h2>Sole stiffness and traction</h2>
          <p>A stiffer sole reduces foot fatigue on rocky terrain. A more flexible sole is comfortable on packed dirt and gravel. Lugged rubber soles (deep, chunky treads) provide grip on loose or wet surfaces.</p>
          <p>If you hike primarily on maintained trails, a moderately stiff sole with medium lugs is sufficient. Save the aggressive tread for off-trail and technical terrain.</p>
        </section>

        <section>
          <h2>Waterproofing: when you need it</h2>
          <p>Waterproof membranes (often branded as Gore-Tex) keep feet dry in wet conditions — but they also reduce breathability. In hot weather, waterproof boots can make feet sweat more than they would in wet conditions without them.</p>
          <p>In the Pacific Northwest, where trails are often wet through spring and early summer, waterproofing is usually worth it. In dry summer conditions, a non-waterproof boot with fast-drying materials may be more comfortable.</p>
        </section>

        <section>
          <h2>The most important factor: fit</h2>
          <p>A technically perfect boot in the wrong size or shape will cause problems. Always try boots on in person, at the end of the day when feet are slightly swollen, with the socks you plan to hike in.</p>
          <p>Check for:</p>
          <ul>
            <li>Heel hold — your heel should not lift when you walk uphill</li>
            <li>Toe room — your toes should not press against the front when descending</li>
            <li>Width — no pinching on the sides or across the top of the foot</li>
          </ul>
        </section>

        <footer>
          <p>Filed under: <a href="blog.html">Gear Guides</a>, <a href="blog.html">Trail Tips</a></p>
        </footer>

      </article>

      <aside>
        <h2>Related Articles</h2>
        <ul>
          <li><a href="blog.html">What to Pack for a Day Hike</a></li>
          <li><a href="blog.html">Trail Etiquette: What Every Hiker Should Know</a></li>
          <li><a href="blog.html">The Best Trails for Fall Color in the Cascades</a></li>
        </ul>
      </aside>

    </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 nested elements work on this page

<article> wraps the entire post — the article is self-contained. It could be syndicated, reprinted, or displayed in a feed and still make sense. The <header>, <section>, <img>, and <footer> inside it are part of the article, not the page.

<header> inside <article> — this is different from the page <header>. A <header> can appear inside <article>, <section>, or other elements. It is the introductory content for its parent — in this case, the title, author, and date for the article.

<section> inside <article> — each major topic in the article is a <section> with its own <h2>. The hierarchy:

<h1> How to Choose the Right Hiking Boot (in <article><header>)
  <h2> Why boot choice matters
  <h2> Boot cut: low, mid, or high
  <h2> Sole stiffness and traction
  <h2> Waterproofing
  <h2> The most important factor: fit

<footer> inside <article> — tags and related links that belong to the article but are not primary content. Optional, but semantically appropriate.

<aside> — related articles. This content is related to the page but not part of the main article itself. <aside> sits inside <main> but outside <article>.

Exercise

Create blog-article.html in your Summit Trail Outfitters folder.

Copy the structure from this lesson into the file.
Add a new <section> inside the <article>, between “Sole stiffness and traction” and “Waterproofing”. Call it Breaking in your boots and write two or three sentences about why new boots need to be worn in before a long hike.
The <img> element references images/hiking-boots.jpg. You do not need a real image — the element and its alt text are what matter. Confirm the alt describes what the image shows.
Open blog-article.html in your browser. Verify the heading hierarchy makes sense when you scan the page.

Recap

A blog article page uses a single <article> for the post, with <section> elements for each major topic inside it.
<header> inside <article> is not the page header — it is the article’s introductory block (title, author, date).
<footer> inside <article> holds article-level metadata like tags or category links.
<aside> inside <main> but outside <article> holds related but secondary content.
The heading hierarchy resets inside <article>: an <h1> inside <article> is the article title, and <h2> elements inside it are article sections.