HTML 5での<aside>要素。

<aside>要素の仕様での定義。

HTML 5の仕様草案に依れば、<aside>要素は

• 前後と繋がりがあるものの本題から外れているセクション

とされております。

スタイリングに於いても、補足記事として相応しいものとする事が想定されます。

<aside>要素の具体的な使い方。

それでは、本題から外れているセクションとは、どのようなものでしょうか。

具体的には、

• 脚注
• 余談
• 記事の筆者や記事に出てくる人物或いは企業に関するプロフィール
• 初めての方への補足
• 用語の説明
• アフィリエイト広告

などから成るセクションが本題から外れているセクション、すなわち<aside>要素となる事が考えられます。

或いは、人に依っては読み飛ばしても問題がない(重要性が薄い)セクションが<aside>要素となり得ると考えられます。

• ですから、仮令脚注やプロフィールであったとしても、本文の流れに組込まれていて読み飛ばせない重要性が高いブロックは、<aside>要素とするのは適切ではないと言う事になります。

<aside>要素の具体的な使い方。

実際に<aside>要素を用いるのが適切なを考えてみましょう。

<article>
    <h1>堀北真希、○○に挑戦！</h1>
    <p>実力派アイドル女優・<a href="#ABOUT_HORIKITA">堀北真希</a>(21)が、○○に挑戦することになった。</p>
    …
    <aside>
        <h2 id="ABOUT_HORIKITA">堀北真希について。</h2>
        <p><time datetime="1988-10-06T00:00:00+09:00">昭和63年10月 6日</time>、東京都清瀬市出身。</p>
        …
        </aside>
    <article>

この例では、記事の話題になっている堀北真希ちゃんに関する簡単なプロフィールを<aside>要素としてセクショニングしております。

堀北真希ちゃんについて既知の読者にとって、プロフィールなど読み飛ばしても問題は殆どない筈だからです。

このように、本題から逸れるセクション、或いは読み飛ばしても問題がないセクションは、全て<aside>要素として扱う事が出来ると考えられます。

或いは、セクションとは考えられないようなブロック(見出しが与えられていないブロック)についても、本題から逸れるのであれば<aside>要素としても良いでしょう。

見出しを伴わない<aside>要素。

<aside>要素はセクショニング内容要素ですので、見出しを与える事でセクションとして構造化されます。

と言う事は、必ず見出しを与えるべきであると考えられるかも知れませんが、実際のところ必ずしも見出しを与える必要はないようです。

• HTML 5の仕様草案に見出しを伴わない<aside>要素の事例があります。

そもそも、<aside>要素の定義が本題から外れた内容としており、無理矢理セクションにする必要はないと考えられます。

ですから、見出しを伴わないブロックに関して、脚注など本題から逸れているようなブロックは見出しなしの<aside>要素とする事が考えられます。

検索エンジンのクローラがHTML 5の要素を解析するようになれば、<aside>要素としてマークアップされている区間のテキストは重要性が薄いものとして優先度を下げてくれるようになるでしょう。

• 逆に<article>要素とされた区間については記事本体と言う事で重要性を上げてくるかも知れません。

<section>要素との使い分け。

さて、HTML 5での一般的なセクションは<section>要素としてマークアップされる事としております。

具体的には、

• <aside>要素
• <article>要素
• <nav>要素

に該当しないセクションが<section>要素とされる事としております。

<article>要素についてはHTML 5での<section>要素と<article>要素の違いで解説しておりますが、記事本体となるセクションです。

一方、<nav>要素はナヴィゲーションセクションであり、どのケースで用いるかは明確でしょう。

そうなると最後には、<aside>要素と<section>要素の使い分けが問題になります。

しかし、<aside>要素の定義と使い方を考えれば、以下のように使い分けが可能になるでしょう。

• 話題の本流となるセクションは<section>要素
• 話題の本流から逸脱するセクションは<aside>要素

何を以って逸脱とするかは分かり難いかも知れませんが、読み飛ばしても問題のない注釈や補足などが該当すると考えれば良いでしょう。

<div>要素との使い分け。

一方、HTML　5では特に意味のないブロックとして<div>要素が定義されております。

• HTML 4/XHTML 1では<div>要素はグループ化されたブロックレヴェル要素と定義されておりました。

本題から逸れたブロックは見出しを伴わない<aside>要素とする事が出来ますが、逆に本題の流れに組込まれている見出しを伴わないブロックは<div>要素とするのが順当でしょう。