<section> / <aside>

Since:		HTML5（2014）

<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

sample_section_aside.html

<!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.

View sample page

Implementing a Sidebar Layout with CSS

Using <section> for the main content and <aside> for the sidebar is a typical layout pattern. CSS Grid or Flexbox can be used to arrange them side by side.

<style>
  /* CSS Grid sidebar layout */
  .content-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 280px; /* Main area + sidebar */
    gap: 32px;
    align-items: start;
  }

  /* Stick the sidebar to the top as the user scrolls */
  aside.sticky-sidebar {
    position: sticky;
    top: 80px; /* Offset by the header height */
  }

  /* Section divider style */
  main section {
    margin-bottom: 48px;
  }
  main section h2 {
    border-left: 4px solid #4a90e2;
    padding-left: 12px;
    margin-bottom: 16px;
  }

  /* Sidebar widget */
  aside .widget {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
  }

  /* Responsive: single column below 768px */
  @media (max-width: 768px) {
    .content-with-sidebar {
      grid-template-columns: 1fr;
    }
  }
</style>

<div class="content-with-sidebar">

  <main>
    <section>
      <h2>Chapter 1: HTML Basics</h2>
      <p>HTML is the language used to define the structure of web pages.</p>
    </section>
    <section>
      <h2>Chapter 2: Styling with CSS</h2>
      <p>CSS controls colors, sizes, and layout.</p>
    </section>
  </main>

  <aside class="sticky-sidebar">
    <div class="widget">
      <h3>Related Articles</h3>
      <ul>
        <li><a href="#">HTML Beginner's Guide</a></li>
        <li><a href="#">CSS Beginner's Guide</a></li>
      </ul>
    </div>
  </aside>

</div>

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'.