Sections & Articles: <section>, <article>, and <aside>

Once you have the page-level skeleton (<header>, <main>, <footer>), the next step is organizing the content inside <main>. Three elements handle this: <section>, <article>, and <aside>.

<section>

<section> groups related content under a common theme. Think of it as a chapter or a named part of a document. Each <section> should have its own heading.

<main>
  <section>
    <h2>Gear</h2>
    <p>Good boots and a reliable pack are essential.</p>
  </section>

  <section>
    <h2>Trail difficulty</h2>
    <p>Trails are rated from easy to strenuous.</p>
  </section>
</main>

Use <section> when content is part of the same page and belongs together — but you want to mark the boundary between topics.

<article>

<article> represents self-contained, independently meaningful content — something that could be lifted out of the page and published or syndicated on its own and still make sense.

Good candidates for <article>:

• A blog post
• A news story
• A product listing
• A user comment
• A forum post

<main>
  <article>
    <h2>Choosing Your First Trail</h2>
    <p>Published May 2025 · 5 min read</p>
    <p>For a first outing, stick to trails under 5 miles...</p>
  </article>

  <article>
    <h2>Essential Rain Gear</h2>
    <p>Published April 2025 · 3 min read</p>
    <p>A waterproof shell is non-negotiable in the mountains...</p>
  </article>
</main>

Each <article> here is a complete, standalone post. Removing one would not break the meaning of the other.

<section> vs <article>

	<section>	<article>
Content	Related, but not standalone	Self-contained, independently meaningful
Test	”Is this a named part of the page?"	"Could this exist on its own, elsewhere?”
Example	A “Features” section on a product page	A blog post, a review, a news item

They can be nested:

<article>
  <h2>Choosing Your First Trail</h2>
  <section>
    <h3>Distance</h3>
    <p>Under 5 miles for beginners.</p>
  </section>
  <section>
    <h3>Elevation gain</h3>
    <p>Less than 500 feet for an easy day.</p>
  </section>
</article>

An article broken into sections — both uses are correct.

<aside>

<aside> holds content that is related to the surrounding content but secondary — it could be removed without the main content losing its meaning.

Common uses:

• A pull quote
• A tip box or callout
• Related links
• Sidebar content

<main>
  <article>
    <h2>Choosing Your First Trail</h2>
    <p>For a first outing, stick to trails under 5 miles...</p>

    <aside>
      <p><strong>Tip:</strong> Check recent trail reports for conditions before you go.</p>
    </aside>

    <p>Look for trails rated "easy" on AllTrails or a local hiking club's website.</p>
  </article>
</main>

The <aside> tip supplements the article but could be removed and the article would still be complete.

Exercise

Open index.html in VS Code. In the previous lesson you wrapped your content in <header>, <main>, and <footer>.

Now add <section> tags inside <main> to group your <h2> subtopics:

<main>
  <section>
    <h2>Your first subtopic</h2>
    <p>Your paragraph about it.</p>
  </section>

  <section>
    <h2>Your second subtopic</h2>
    <p>Your paragraph about it.</p>
  </section>
</main>

Then add one <aside> inside one of your sections with a short tip or note related to that subtopic:

<section>
  <h2>Gear</h2>
  <p>Good boots and a reliable pack are essential.</p>
  <aside>
    <p><strong>Tip:</strong> Buy boots in person so you can test the fit before a long hike.</p>
  </aside>
</section>

Save and reload in your browser. The layout will look the same — structure does not change appearance without CSS — but your HTML now communicates its meaning clearly.

Recap

• <section> groups related content under a theme. Each section should have a heading.
• <article> marks self-contained content that could stand alone — blog posts, news items, user comments.
• <aside> holds secondary, supplementary content related to the surrounding context.
• <section> and <article> can be nested inside each other when appropriate.