aside 要素

4.4.5 aside 要素

Status: Last call for comments

カテゴリー
フロー・コンテンツ
セクショニング・コンテンツ
formatBlock 候補
この要素を使うことができるコンテキスト：
フロー・コンテンツが期待される場所
コンテンツ・モデル：
フロー・コンテンツ
コンテンツ属性：
グローバル属性
DOMインタフェース：
HTMLElement を使う。

aside 要素は、その前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページのセクションを表し、コンテンツから分離されたものとして見なすことができます。このようなセクションは、印刷慣例では、よく補足記事として表されるものです。

この要素は、本文引用枠や補足記事のような印刷効果、広告、nav 要素のグループ化、ページのメイン・コンテンツから分離しても構わないようなコンテンツに使うことができます。

挿入句に aside 要素を使うのは適切ではありません。それは、ドキュメントの主流の一部だからです。

次の例では、ヨーロッパに関するかなり長いニュースの中に、スイスに関する参考資料をマークアップするために、aside がどのように使われるのかを示しています。

<aside>
 <h1>スイス</h1>
 <p>スイスは、地理的にはヨーロッパ中央にある内陸の国ですが、
多くの欧州の政治的な条約に調印しているものの、
欧州連合には加わりませんでした。</p>
</aside>

次の例では、長い記事の中のリード文をマークアップするために、aside がどのように使われるかを示しています。

...

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

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

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

...

次の抜粋は、ブログ上のブログロールや脇に寄せられたコンテンツに対して、aside 要素をどのようにして使うのかを示しています：

<body>
 <header>
  <h1>My wonderful blog</h1>
  <p>My tagline</p>
 </header>
 <aside>
  <!-- this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog -->
  <nav>
   <h1>My blogroll</h1>
   <ul>
    <li><a href="http://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h1>Archives</h1>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
 </aside>
 <aside>
  <!-- this aside is tangentially related to the page also, it
  contains twitter messages from the blog author -->
  <h1>Twitter Feed</h1>
  <blockquote cite="http://twitter.example.net/t31351234">
   I'm on vacation, writing my blog.
  </blockquote>
  <blockquote cite="http://twitter.example.net/t31219752">
   I'm going to go on vacation soon.
  </blockquote>
 </aside>
 <article>
  <!-- this is a blog post -->
  <h1>My last post</h1>
  <p>This is my last post.</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <article>
  <!-- this is also a blog post -->
  <h1>My first post</h1>
  <p>This is my first post.</p>
  <aside>
   <!-- this aside is about the blog post, since it's inside the
   <article> element; it would be wrong, for instance, to put the
   blogroll here, since the blogroll isn't really related to this post
   specifically, only to the page as a whole -->
   <h1>Posting</h1>
   <p>While I'm thinking about it, I wanted to say something about
   posting. Posting is fun!</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <nav>
   <a href="/archives">Archives</a> —
   <a href="/about">About me</a> —
   <a href="/copyright">Copyright</a>
  </nav>
 </footer>
</body>

※ 原文：http://www.w3.org/TR/2010/WD-html5-20100624/sections.html#the-aside-element