<section> / <aside>

<section> represents a thematic grouping of content, while <aside> represents supplementary content that is only indirectly related to the main content (such as sidebars, ads, or related links).

Syntax

<!-- Section -->
<section>
  <h2>Section heading</h2>
  <p>Section content...</p>
</section>

<!-- Supplementary content -->
<aside>
  <h3>Related links</h3>
  <ul>
    <li><a href="#">Related article 1</a></li>
  </ul>
</aside>

Tag list

Tag	Description
<section>	Represents a thematic section of content. Usually accompanied by a heading (h1–h6).
<aside>	Represents supplementary content that is only indirectly related to the main content. Used for sidebars, annotations, and ads.

Sample code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>section / aside example</title>
</head>
<body>

  <main>

    <article>
      <h1>JavaScript Basics</h1>

      <!-- Section 1 -->
      <section>
        <h2>Variables and Constants</h2>
        <p>Use <code>let</code> for variables and <code>const</code> for constants.</p>
      </section>

      <!-- Section 2 -->
      <section>
        <h2>Functions</h2>
        <p>A function groups a set of statements and gives them a name.</p>
      </section>

    </article>

    <!-- Supplementary content (sidebar) -->
    <aside>
      <h3>Related articles</h3>
      <ul>
        <li><a href="#">Introduction to JavaScript</a></li>
        <li><a href="#">What is TypeScript?</a></li>
      </ul>
      <h3>Recommended books</h3>
      <p>"Easy Programming: JavaScript Edition"</p>
    </aside>

  </main>

</body>
</html>

Result

The main content area displays two sections — "Variables and Constants" and "Functions" — and the supplementary content with related articles and recommended books appears alongside (or before/after) them. The actual layout is controlled by CSS.

Notes

The difference between <section> and the generic container <div> is semantics. Use <section> when the content has a heading and forms a meaningful thematic unit. If you only need a layout container without semantic meaning, <div> is the better choice.

<aside> represents content that is "not directly related to the main content, but useful as supplementary information." You can also use it for inline annotations or glossary terms within an article. The most common use is to wrap an entire sidebar in <aside>, but avoid using it for completely unrelated ad banners.

For page headers and footers, see 'header / footer'. For the main content area, see 'main / article'.