Article & Section

Difficulty: Intermediate

The <article> and <section> elements are two of the most commonly confused semantic elements in HTML5. While both are sectioning content elements that contribute to the document outline, they serve fundamentally different purposes. Understanding the distinction is crucial for writing meaningful markup.

The <article> element represents a self-contained composition that could be independently distributed or reused. The key test is syndication: if the content makes sense on its own when extracted from the page - shared in an RSS feed, embedded on another site, or read in a news aggregator - it qualifies as an <article>. Blog posts, news stories, forum posts, product cards, user comments, and interactive widgets are all valid uses of <article>.

The <section> element represents a thematic grouping of content, typically with a heading. Unlike <article>, a <section> does not need to make sense in isolation. It groups related content within a page - a chapter of a document, a tab panel, or a distinct area of a dashboard. The HTML spec recommends that a <section> should almost always have a heading (h1-h6) as a child. If you cannot think of a natural heading for the group, a <div> might be more appropriate.

The <aside> element deserves mention here because it often gets confused with <section>. An <aside> represents content that is tangentially related to the content around it - sidebars, pull quotes, advertising, groups of related links, or supplementary information. The content in an <aside> should be related to but not essential to the main content. If removing the <aside> does not diminish the main content's meaning, you have used it correctly.

A common pattern is nesting these elements. Articles can contain sections (e.g., a long blog post divided into chapters), and sections can contain articles (e.g., a "Latest Posts" section containing multiple article cards). You can also nest articles within articles - for example, a blog post article containing comment articles. The nesting should reflect the actual content hierarchy, not the visual layout.

Code examples

Article vs Section vs Div

<!-- Article: self-contained, syndicatable -->
<article>
  <h2>How to Learn CSS Grid</h2>
  <p>CSS Grid is a powerful layout system...</p>
  <p>Start by understanding grid containers and grid items...</p>
</article>

<!-- Section: thematic grouping with heading -->
<section>
  <h2>Our Services</h2>
  <p>We offer web design, development, and consulting.</p>
  <ul>
    <li>UI/UX Design</li>
    <li>Full-Stack Development</li>
    <li>Technical Consulting</li>
  </ul>
</section>

<!-- Div: no semantic meaning, for styling only -->
<div class="grid grid-cols-2 gap-4">
  <div class="card">Card A</div>
  <div class="card">Card B</div>
</div>

The article stands alone as a blog post. The section groups related service information under a heading. The div is a layout wrapper with no semantic meaning - it exists only for CSS Grid styling.

Section Containing Articles

<main>
  <section aria-labelledby="latest-heading">
    <h2 id="latest-heading">Latest Articles</h2>
    <article>
      <h3>Understanding Flexbox</h3>
      <p>Flexbox is a one-dimensional layout model...</p>
      <a href="/posts/flexbox">Read more</a>
    </article>
    <article>
      <h3>CSS Custom Properties</h3>
      <p>CSS variables allow you to define reusable values...</p>
      <a href="/posts/custom-properties">Read more</a>
    </article>
    <article>
      <h3>Responsive Typography</h3>
      <p>Using clamp() for fluid font sizes...</p>
      <a href="/posts/responsive-typography">Read more</a>
    </article>
  </section>

  <section aria-labelledby="popular-heading">
    <h2 id="popular-heading">Popular This Week</h2>
    <article>
      <h3>JavaScript Closures Explained</h3>
      <p>A closure gives access to an outer function's scope...</p>
    </article>
  </section>
</main>

The page has two thematic sections - 'Latest Articles' and 'Popular This Week'. Each section groups related articles. The aria-labelledby attribute connects each section to its heading for better accessibility.

Article with Sections and Aside

<article>
  <header>
    <h1>Complete Guide to Semantic HTML</h1>
    <p>By Sarah Chen | <time datetime="2026-03-11">March 11, 2026</time></p>
  </header>

  <section>
    <h2>Introduction</h2>
    <p>Semantic HTML is the backbone of accessible web development...</p>
  </section>

  <section>
    <h2>Key Elements</h2>
    <p>HTML5 introduced several new semantic elements...</p>
  </section>

  <aside>
    <h3>Related Reading</h3>
    <ul>
      <li><a href="/aria-guide">WAI-ARIA Guide</a></li>
      <li><a href="/a11y-checklist">Accessibility Checklist</a></li>
    </ul>
  </aside>

  <section>
    <h2>Conclusion</h2>
    <p>By using semantic elements, you build a better web...</p>
  </section>
</article>

A long article is divided into sections (chapters). An aside within the article contains tangentially related links. This is a common pattern for documentation and long-form content.

Nested Articles (Comments)

<article>
  <h2>Is TypeScript Worth Learning?</h2>
  <p>TypeScript adds static typing to JavaScript...</p>

  <section>
    <h3>Comments</h3>
    <article>
      <header>
        <strong>UserA</strong>
        <time datetime="2026-03-11T10:30">10:30 AM</time>
      </header>
      <p>Absolutely! TypeScript has saved me hours of debugging.</p>
    </article>
    <article>
      <header>
        <strong>UserB</strong>
        <time datetime="2026-03-11T11:15">11:15 AM</time>
      </header>
      <p>The learning curve is worth it for larger projects.</p>
    </article>
  </section>
</article>

The blog post is an article. Each comment is also a self-contained article nested inside. Comments are grouped in a section with a heading. This accurately represents the content hierarchy.

Key points

Concepts covered

article, section, aside, Sectioning Content, Content Grouping