aside 要素

4.3.5 aside 要素

カテゴリー:
フロー・コンテント
セクショニング・コンテント
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フロー・コンテントが期待される場所
コンテントモデル:
フロー・コンテント 、ただし、子孫に main 要素がないこと。
コンテント属性:
グローバル属性
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
complementary ロール (デフォルト - 指定不要), note, search, presentation
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
HTMLElement を使う

aside 要素は、その 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>ステキなブログ</h1>
  <p>タグライン</p>
 </header>
 <aside>
  <!-- この aside にはこのページと関連が薄いといえるセクションが2つあります。
  具体的には他のブログへのリンクと、このブログの投稿へのリンクです。 -->
  <nav>
   <h1>ブログロール</h1>
   <ul>
    <li><a href="http://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h1>アーカイブ</h1>
   <ol reversed>
    <li><a href="/last-post">最新の投稿</a>
    <li><a href="/first-post">最初の投稿</a>
   </ol>
  </nav>
 </aside>
 <aside>
  <!-- この aside もこのページとの関連が薄いといえます。
  ここにはブログ著者からのツイッターのメッセージが入れられています -->
  <h1>ツイッターのフィード</h1>
  <blockquote cite="http://twitter.example.net/t31351234">
   休みなのでブログを書いてる。
  </blockquote>
  <blockquote cite="http://twitter.example.net/t31219752">
   もうすぐお休みだ。
  </blockquote>
 </aside>
 <article>
  <!-- これはブログ投稿です -->
  <h1>最新の投稿</h1>
  <p>これは最新の投稿です。</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>パーマリンク</a>
  </footer>
 </article>
 <article>
  <!-- これもブログ投稿です -->
  <h1>最初の投稿</h1>
  <p>これは最初の投稿です。</p>
  <aside>
   <!-- この aside は、<article> 要素の中にあるので、このブログ投稿に
   関するものです。たとえば、ここにブログロールを入れたとしたら、正しくないでしょう。
   なぜなら、そのブログロールは、ページ全体には関係しているかもしれませんが、
   特にこの投稿に関係しているわけではないからです。 -->
   <h1>投稿するということ</h1>
   <p>それについて考えていると、投稿について何か言いたくなる。
   投稿は楽しい!</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>パーマリンク</a>
  </footer>
 </article>
 <footer>
  <nav>
   <a href="/archives">アーカイブ</a> —
   <a href="/about">私について</a> —
   <a href="/copyright">コピーライト</a>
  </nav>
 </footer>
</body>

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-aside-element