HTML Content Sectioning: article, section, aside, and nav

HTML Content Sectioning Elements

Content sectioning elements define the structure of a web page. They create the document outline that browsers, screen readers, and search engines use to understand how content is organized.

article vs. section

This is one of the most common points of confusion:

<article> — Self-contained content that could be distributed independently:

• Blog posts
• News articles
• Forum posts
• Product cards
• Comments

<section> — Thematic grouping of content, always with a heading:

• Chapter of a document
• Tab panel content
• Groups within a form

<!-- Article: self-contained -->
<article>
  <h2>How to Use Flexbox</h2>
  <p>Flexbox is a CSS layout module...</p>
  <footer>Published by Jane Doe</footer>
</article>

<!-- Section: thematic grouping -->
<section>
  <h2>Pricing Plans</h2>
  <div class="plans">...</div>
</section>

nav — Navigation Sections

Use <nav> for major navigation blocks, not every group of links:

<!-- Major navigation: YES -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
  </ul>
</nav>

<!-- Footer links: typically NO (unless primary navigation) -->
<footer>
  <ul>
    <li><a href="/privacy">Privacy</a></li>
    <li><a href="/terms">Terms</a></li>
  </ul>
</footer>

aside — Tangential Content

<aside> is for content related to but separate from the main content:

<main>
  <article>
    <h1>Main Article</h1>
    <p>Article content...</p>

    <!-- Inside article: related to the article -->
    <aside>
      <h2>Did You Know?</h2>
      <p>An interesting fact related to this topic...</p>
    </aside>
  </article>
</main>

<!-- Outside main: related to the page -->
<aside>
  <h2>Recent Posts</h2>
  <ul>...</ul>
</aside>

Document Outline

A well-structured page creates a clear outline:

1. <header> — Site branding and primary navigation
2. <main> — One per page, dominant content
3. <article> / <section> — Content groupings
4. <aside> — Supplementary information
5. <footer> — Closing information and secondary navigation