aside 要素についてまとめてみた【初心者向け】

2025/05/03 2025/05/05 更新 Web

header、main、article …… aside …… aside ！？

aside 要素って何さ！？

初心者のうちは、あんまり馴染みのない aside 要素についてまとめてみました。

この記事でわかること

aside 要素の役割
aside 要素の基本的な使い方

aside 要素って
どこで使うの？

aside 要素って、パっと見ではどのような場面で使用するかを容易に想像できないですよね。

何はともあれ、
単語の意味が解らなければ、始まらない！

aside とは

aside の読みは、『アサイド』。“エーサイド”ではないのでご注意を！

意味は、「余談、脱線、わきへ」といった感じ。

単語

aside：【名詞】余談、脱線、【副詞】わきへ、かたわらに（weblio）

余談とかで使う要素なのかな？？余談と言われても、ピンと来ないですよね。もっと具体的にどのような部分で使うのかを知りたいですよね？？

それは……

サイドバーとかで使う

aside 要素は、具体的にはサイドバーを囲ったりするのに使います。

実は結構、身近な要素だったのです！！（キリッ）

ちなみに公式の原文はこんな説明です。

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
HTML Living Standard

英文だと難しくて、私には正しく理解できませんが、翻訳するとなんとな～く読み取れるかと思います。

aside 要素は、その周囲のコンテンツと間接的に関連する内容から成るページ内のセクションを表します。そして、その内容は元のコンテンツとは切り離して考えることもできます。印刷されたタイポグラフィ（文字組み）では、このようなセクションはしばしばサイドバーとして表現されます。

また、サイドバーの他にも、
補足情報や関連リンク、広告などを囲うのにも使われたりします。

aside 要素は
Sectioning content

aside 要素は、Content models（コンテンツモデル）の概念において、Sectioning content（セクショニングコンテンツ）のカテゴリに属しています。

ということは、
aside 要素内に header 要素や footer 要素を入れると、その aside 要素のセクションに属するヘッダーとフッターと解釈されるということですね！（もちろん別に入れなくてもOK。）

コンテンツモデルについて気になる方は、下の記事を参照していただけますと幸いです。

【HTML5】コンテンツモデルについて調べてみた

セクショニングコンテンツ四天王が１人！覚えておいて損はないですね！

aside 要素の使用例

aside 要素の基本的な使い方を２パターンに分けて紹介します。

・メインのコンテンツから明確に独立した情報である aside 要素
・コンテンツの流れで挿入される補足情報である aside 要素

前者は明確に『この情報は補足的・周辺的なものだな』と分かり、まさに“aside”って感じです。まずはこちらの使い方をマスターしましょう！

後者は少し使い分け曖昧で繊細な使い方です。しかし、使いこなせるとより意味の伝わるコードが書けるようになります！

ちなみに aside 要素は、 main 要素のように『１ページに１つだけ』という制限はなく、複数使うことができます。ただし、それぞれの aside がどんな補足情報なのか、明確な意味があることが前提です。

補足

・メインのコンテンツ ≒ ページの主たる内容
・メインのコンテンツ ≠ main 要素

main 要素の中に入れてはいけない、または、入れなければいけないということではありません。

メインのコンテンツから明確に独立した情報である aside 要素

・サイドバー（プロフィール、おすすめ記事、広告など）
・広告
・ナビゲーション
・SNS リンク
など

例として、『プロフィール』と『おすすめ記事』を aside 要素で囲って入れてみました。

<body>
 <header>やさしいブログ</header>
 <main>
  <article>
   <h1>おいしいおにぎり</h1>
   <p>こんにちは。今日はおにぎりをもって公園に行きました。</p>
   <p>…</p>
  </article>
 </main>
 <aside>
 <h2>プロフィール</h2>
  <p>…</p>
 </aside>
 <aside>
  <h2>おすすめ記事</h2>
  <p>…</p>
 </aside>
 <footer>…</footer>
</body>

あとは、aside 要素をお好みでサイドバーに仕上げたり、記事下に入れたりとスタイリングすればOKというわけです！

コンテンツの流れで挿入される補足情報である aside 要素

・引用
・説明図、写真、参考情報
・脚注やコラム
・文中に挿入される用語解説
など

<article>
  <h1>富士山の魅力</h1>
  <p>富士山は日本で最も高い山であり、多くの観光客を引きつけています。</p>

  <aside>
    <h2>豆知識</h2>
    <p>富士山は2013年に世界文化遺産に登録されました。</p>
  </aside>
</article>

メインのコンテンツの本筋からは少し離れた役立つ情報といった使い方だとイメージしやすいでしょうか。

一方で、その情報がコンテンツの本筋にとって不可欠なものである場合は、aside 要素を使うのは不適当かもしれません。

何でもかんでも補足情報を aside 要素で囲っておけばいいというわけではなく、きちんと文脈を理解していなければ正しく使えない繊細な使い方ということですね。サイトやチームで使用ルールを作るとサイト全体で統一された aside 要素の使い方がされてクオリティの高いコードになります。

そんなわけで、こちらの考え方は少しだけ難易度が上がります。

まずは、aside 要素の『明確に独立した情報』として使う基本的な使い方をしっかりとマスターしましょう。慣れてきたら、『コンテンツの流れで挿入する補足情報』といった文脈をしっかり読み取って適切に使うワンランク上の使い方にもチャレンジしていきましょう！

まとめ

aside 要素は、サイドバー（プロフィールやおすすめ記事などを含む）や、広告といったメインのコンテンツから明確に独立した情報を囲うために使われます。

また、メインのコンテンツの本筋からは少し離れた補足情報を挿入する用途にも使われます。こちらは文脈をしっかり読み取って適切に使う必要があり、やや上級者向けです。慣れてからチャレンジするのがよいですね！

aside 要素は、アクセシビリティの向上や SEO にもつながる大切な意味を持つ要素です。しっかりと身に着けて、読みやすく伝わりやすいステキな Web ページづくりを目指していきましょう！

参考・出典

・HTML Living Standard. 「4.3.5 The aside element」. https://html.spec.whatwg.org/#the-aside-element, 2025年4月30日閲覧。

・MDN. 「<aside>: 余談要素」. https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/aside, 2025年4月30日閲覧。

・weblio. 「asideとは意味・読み方・使い方」. https://ejje.weblio.jp/content/aside, 2025年4月30日閲覧。