aside - 関連するが本筋とはやや異なる情報

その前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページのセクションを表します。
印刷の慣例では、よく補足記事として表されるものが相当します。
※挿入句としてaside要素を使うのは適切ではありません。

aside要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
aside - - - -

aside要素のHTML4からHTML5への変更点

aside要素は、HTML5から新たに追加された要素です

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。

「基本」のサンプル

HTMLコード

<aside>
 <h1>aside要素の用例</h1>
 <p>コンテンツの補足や関連情報に使うのが適切です。</p>
</aside>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「基本」のサンプルプレビューを確認

「長い記事の中のリード文をマークアップ」のサンプル

HTMLコード

<p>彼は後に大企業に就職し、これまでと同じ仕事を続けることになった。
<q>私は自分の仕事が好きだ。みんな私に、仕事をしていないときは何を楽しんでいるんだ、
と聞いてくる。でも、私は好きでやっているんだ。だから、何て答えていいのか
分からない。このように、仕事をしていなかったら自分は何をしていただろうかと
考える人がいる。でも私は自分が何をするだろうか分かっている。なぜなら、私は
1年間無職だったからだ。そして、今自分がすべきことを正確に考える時間がいっぱい
あったからだ。</q></p>

<aside>
 <q> みんな私に、仕事をしていないときは何を楽しんでいるんだ、と聞いてくる。
でも、私は好きでやっているんだ。だから、何て答えていいのか分からない。 </q>
</aside>

<p>もちろん、彼の仕事、というよりかは趣味といった方が良いかもしれないが、
彼はそれだけに熱中しているわけではない。彼は、他にも楽しんでいるものがある。</p>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「長い記事の中のリード文をマークアップ」のサンプルプレビューを確認

「ブログ上のブログロールや脇に寄せられたコンテンツに対してaside要素を使う」のサンプル

HTMLコード

<header>
  <h1>ブログでの使用例</h1>
  <p>aside要素の使用例です。</p>
</header>
<aside>
   <nav>
   <h1>ブログの記事</h1>
   <ul>
    <li><a href="http://blog.example.com/">ブログ記事(例)</a>
   </ul>
  </nav>
  <nav>
   <h1>アーカイブ</h1>
   <ol reversed>
    <li><a href="/last-post">最近の投稿</a>
    <li><a href="/first-post">最初の投稿</a>
   </ol>
  </nav>
</aside>
<aside>
  <h1>Twitter フィード</h1>
  <blockquote cite="http://twitter.example.net/t31351234">
       ツイッターからのブログ投稿です。
  </blockquote>
  <blockquote cite="http://twitter.example.net/t31219752">
      ツイッターからの投稿です2。
  </blockquote>
</aside>
<article>
  <h1>最近の投稿</h1>
  <p>これは私の最近の投稿です。</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
</article>
<article>
  <h1>最初の投稿</h1>
  <p>これは私の最近の投稿です。</p>
  <aside>
   <h1>Posting</h1>
   <p>article要素の中のaside要素の例です。</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>Permalink</a>
  </footer>
</article>
<footer>
  <nav>
   <a href="/archives">アーカイブ</a> —
   <a href="/about">自己紹介</a> —
   <a href="/copyright">Copyright</a>
  </nav>
</footer>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「ブログ上のブログロールや脇に寄せられたコンテンツに対してaside要素を使う」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100624/sections.html#the-aside-element)