Article, Section, and Aside

The <article> element represents a self-contained piece of content that makes sense independently — a blog post, news article, forum post, or product card. It could be distributed or syndicated on its own. An <article> can contain its own <header>, <footer>, and nested <section> elements.

Section vs Aside

The <section> element groups thematically related content within a document. If you cannot think of a heading for a group of content, a <div> is likely more appropriate than <section>. The <aside> element represents content that is tangentially related to the content around it — a sidebar, pull quote, glossary, or related-links panel. Its content should still make sense if removed from the main flow.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Article, Section, Aside</title>
  <style>
    .layout { display: flex; gap: 24px; max-width: 960px; margin: auto; }
    main { flex: 2; }
    aside { flex: 1; background: #f5f5f5; padding: 16px; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="layout">
    <main>
      <article>
        <header>
          <h1>How the Web Works</h1>
          <p>Published <time datetime="2025-03-15">March 15, 2025</time></p>
        </header>
        <section>
          <h2>Clients and Servers</h2>
          <p>When you type a URL...</p>
        </section>
        <section>
          <h2>HTTP Protocol</h2>
          <p>Requests and responses...</p>
        </section>
      </article>
    </main>
    <aside>
      <h2>Related Articles</h2>
      <ul><li><a href="#">What is DNS?</a></li></ul>
    </aside>
  </div>
</body>
</html>

HTML

Full Editor

Pro Tip

Ask yourself: "Could this content be published in an RSS feed independently?" If yes, use <article>. If the content only makes sense in context of the surrounding page, use <section> or <div>.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned