★HTML Living Standard リファレンス

<aside> …… メインコンテンツとは別のコンテンツであることを表す
Internet Explorer

<aside>タグは、メインコンテンツとは別のコンテンツのセクションであることを表す際に使用します。

aside要素は、メインコンテンツの本文から外れる別のコンテンツで構成されているセクションです。例えば、広告、ナビゲーション要素のグループなどです。

括弧でくくって本文に差し込む挿入句は、本文の一部と解釈できます。そのため、括弧でくくる内容をaside要素に指定するのは適切ではありません。

aside要素に適したスタイル

aside要素に指定されるセクションは、一般的にはサイドバーやプルクオートなどのスタイルで表示されることが多いでしょう。本文から外れて欄外に別枠を設けて掲載したり、あるいは、メインコンテンツとは異なる特別なスタイルにして際立たせる場合もあるでしょう。

■使用例

以下のサンプルは、ヨーロッパに関する長いニュース記事の本文があるとして、その本文中に登場するスイスに関する基礎知識をaside要素でマークアップしたという想定です。

HTMLソース

<p>
ヨーロッパの歴史は、様々な民族の移動と紛争の歴史とも言えます。
</p>
<p>
その中でも<a href="#swiss">スイス</a>は、フランスとオーストリアに挟まれた位置にあり、
地理的にも歴史的にも大国間の紛争に巻き込まれやすい立場にありました
</p>

<aside id="swiss">
 <h2>スイス</h2>
 <p>
 スイスは、地理的にヨーロッパの真ん中にある内陸国です。
 多くのヨーロッパ条約に署名していますが、欧州連合には参加していません。
 </p>
</aside>

↓↓↓

ブラウザ上の表示

ヨーロッパの歴史は、様々な民族の移動と紛争の歴史とも言えます。

その中でもスイスは、フランスとオーストリアに挟まれた位置にあり、地理的にも歴史的にも大国間の紛争に巻き込まれやすい立場にありました

■使用例

以下のサンプルは、長い記事のプルクオートをaside要素でマークアップした使用例です。プルクォートとは、本文の一部をリピート引用しながら目立たせて印象的にする表現技法です。

HTMLソース

...

<p>
彼はその後、一般企業に入社して同じ仕事を続けています。
 <q>
 私はいまの仕事が好きです。
 仕事をしていないときは、何をして楽しんでいるのかとよく聞かれます。
 でも、趣味でお金をもらっているので、何と答えたらいいのかわかりません。
 働く必要がなかったら何をしていたのだろうと考える人もいるかもしれませんが、
 私は１年間失業していたので、働いていない時間に自分が何をするかを知っていました。
 </q>
</p>

<aside>
 <q>
 仕事をしていないときは、何をして楽しんでいるのかとよく聞かれます。
 でも、趣味でお金をもらっているので、何と答えたらいいのかわかりません。
 </q>
</aside>

<p>
もちろん、仕事（彼の場合は趣味というべきでしょうか？）は、彼の唯一の楽しみではありません。
彼には他の楽しみもあります。
</p>

...

↓↓↓

ブラウザ上の表示

...

彼はその後、一般企業に入社して同じ仕事を続けています。私はいまの仕事が好きです。仕事をしていないときは、何をして楽しんでいるのかとよく聞かれます。でも、趣味でお金をもらっているので、何と答えたらいいのかわかりません。働く必要がなかったら何をしていたのだろうと考える人もいるかもしれませんが、私は１年間失業していたので、働いていない時間に自分が何をするかを知っていました。

もちろん、仕事（彼の場合は趣味というべきでしょうか？）は、彼の唯一の楽しみではありません。彼には他の楽しみもあります。

...

■使用例

以下のサンプルは、ブログにおけるaside要素の使い方の一例です。

HTMLソース

<body>

 <header>
  <h1>マイブログ</h1>
  <p>私のブログへようこそ！</p>
 </header>

 <aside>
  <!--
  このaside要素には、他ブログへのリンクと、このブログのアーカイブへのリンク
  の2つのセクションが含まれます。
  -->
  <nav>
   <h2>他ブログへのリンク</h2>
   <ul>
    <li><a href="https://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h2>アーカイブ</h2>
   <ol reversed>
    <li><a href="/last-post">直近の投稿</a>
    <li><a href="/first-post">最初の投稿</a>
   </ol>
  </nav>
 </aside>

 <aside>
  <!--
  このaside要素には、ブログ作者によるTwitter投稿が含まれます。
  -->
  <h1>Twitter投稿</h1>
  <blockquote cite="https://twitter.example.net/t31351234">
   いま休暇中でブログを書いてます。
  </blockquote>
  <blockquote cite="https://twitter.example.net/t31219752">
   もうすぐ休暇がとれそうです。
  </blockquote>
 </aside>

 <article>
  <!-- ブログ投稿 -->
  <h2>直近の投稿</h2>
  <p>直近のブログ投稿です。</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>この記事のURL</a>
  </footer>
 </article>

 <article>
  <!-- ブログ投稿 -->
  <h2>最初の投稿</h2>
  <p>私が一番最初に書いたブログ投稿です。</p>
  <aside>
   <!--
   このaside要素は、article要素内にあるので、このブログ投稿に関するものとなります。
   例えば、ここにブログロール（他ブログへのリンク）を配置するのは誤りです。
   ブログロールは、この投稿のみに関連しているのではなくブログ全体に関連しているからです。
   -->
   <h2>この投稿について</h2>
   <p>いろいろ考えていたことを、ブログに投稿してみたくなりました。</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>この記事のURL</a>
  </footer>
 </article>

 <footer>
  <p><a href="/archives">アーカイブ</a> -
   <a href="/about">自己紹介</a> -
   <a href="/copyright">著作権について</a></p>
 </footer>

</body>

↓↓↓

ブラウザ上の表示

マイブログ

私のブログへようこそ！

直近の投稿

直近のブログ投稿です。

最初の投稿

私が一番最初に書いたブログ投稿です。

■関連項目

<body> …… 文書の本体（コンテンツ）を表す
<article> …… 自己完結する内容であることを表す
<section> …… 一般的なセクションを表す
<nav> …… ナビゲーションリンクのセクションを表す
<aside> …… メインコンテンツとは別のコンテンツであることを表す
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> …… セクションの見出しを表す
<hgroup> …… 見出しとその関連コンテンツを表す
<header> …… 導入部分やナビゲーション補助のグループを表す
<footer> …… フッターを表す
<address> …… 連絡先情報を表す

★HTML Living Standard リファレンス

aside要素に適したスタイル

■使用例

HTMLソース

ブラウザ上の表示

■使用例

HTMLソース

ブラウザ上の表示

■使用例

HTMLソース

ブラウザ上の表示

直近の投稿

最初の投稿

■関連項目

Sponsors