Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<section> / <aside>

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

構文

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

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

タグ一覧

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

サンプルコード

<!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で制御します。

概要

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

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

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