<section> / <aside>

対応:		HTML5（2014）

『<section>』はテーマでまとまったコンテンツのひとかたまりを表し、『<aside>』はメインコンテンツと直接関係のない補足情報（サイドバー・広告・関連リンクなど）を表します。

構文

<!-- セクション -->
<section>
  <h2>セクションの見出し</h2>
  <p>セクションの内容...</p>
</section>

<!-- 補足情報 -->
<aside>
  <h3>関連リンク</h3>
  <ul>
    <li><a href="#">関連記事1</a></li>
  </ul>
</aside>

タグ一覧

タグ	概要
<section>	ひとつのテーマでまとまったコンテンツのセクションを表します。通常、見出し（h1〜h6）を伴います。
<aside>	メインコンテンツと間接的にしか関係しない補足情報を表します。サイドバー・注釈・広告などに使います。

サンプルコード

sample_section_aside.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>section / aside のサンプル</title>
</head>
<body>

  <main>

    <article>
      <h1>JavaScriptの基礎</h1>

      <!-- セクション1 -->
      <section>
        <h2>変数と定数</h2>
        <p>変数は『let』、定数は『const』を使って宣言します。</p>
      </section>

      <!-- セクション2 -->
      <section>
        <h2>関数</h2>
        <p>関数は処理をひとまとめにして名前を付けたものです。</p>
      </section>

    </article>

    <!-- 補足情報（サイドバー） -->
    <aside>
      <h3>関連記事</h3>
      <ul>
        <li><a href="#">JavaScript入門</a></li>
        <li><a href="#">TypeScriptとは</a></li>
      </ul>
      <h3>おすすめ書籍</h3>
      <p>「やさしいプログラミング JavaScript編」</p>
    </aside>

  </main>

</body>
</html>

実行結果

メインコンテンツの中に「変数と定数」「関数」の2つのセクションが並び、その隣（またはメインコンテンツの前後）に関連記事・おすすめ書籍の補足情報が表示されます。実際の配置はCSSで制御します。

サンプルページはこちら

CSSでサイドバーレイアウトを実装する

『<section>』でメインコンテンツを、『<aside>』でサイドバーを構成するのが典型的なパターンです。CSS GridまたはFlexboxでサイドバーレイアウトを作れます。

<style>
  /* CSS Grid によるサイドバーレイアウト */
  .content-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 280px; /* メインエリア + サイドバー */
    gap: 32px;
    align-items: start;
  }

  /* サイドバーを上部に固定してスクロールに追随させる */
  aside.sticky-sidebar {
    position: sticky;
    top: 80px; /* ヘッダーの高さ分下げる */
  }

  /* セクション区切りのスタイル */
  main section {
    margin-bottom: 48px;
  }
  main section h2 {
    border-left: 4px solid #4a90e2;
    padding-left: 12px;
    margin-bottom: 16px;
  }

  /* サイドバーウィジェット */
  aside .widget {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
  }

  /* レスポンシブ: 768px以下は1カラムに */
  @media (max-width: 768px) {
    .content-with-sidebar {
      grid-template-columns: 1fr;
    }
  }
</style>

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

  <main>
    <section>
      <h2>第1章: HTMLの基礎</h2>
      <p>HTMLはWebページの構造を定義する言語です。</p>
    </section>
    <section>
      <h2>第2章: CSSでスタイルを付ける</h2>
      <p>CSSで文字色・サイズ・レイアウトを指定します。</p>
    </section>
  </main>

  <aside class="sticky-sidebar">
    <div class="widget">
      <h3>関連記事</h3>
      <ul>
        <li><a href="#">HTML入門</a></li>
        <li><a href="#">CSS入門</a></li>
      </ul>
    </div>
  </aside>

</div>

概要

『<section>』と汎用コンテナの『<div>』の違いは、セマンティクス（意味）の有無です。「このかたまりに見出しがあり、ひとつのテーマでまとまっている」と判断できるならば『<section>』を使います。単にレイアウト上の区切りとして使いたいだけであれば、意味を持たない『<div>』の方が適切です。

『<aside>』はメインコンテンツと「直接は関係しないが、補足として有用な情報」を表します。記事の途中に挿入する注釈・用語解説にも使えます。サイドバー全体を丸ごと『<aside>』で囲む使い方が最も一般的ですが、まったく無関係な広告バナーには使わないようにしましょう。

ページのヘッダー・フッターについては『header / footer』を、主要コンテンツについては『main / article』をご覧ください。