『aside要素』 / HTML5新要素一覧　

aside要素

メインコンテンツとは関連性が薄く、切り離すことができるコンテンツを表します。

aside要素の特徴

aside要素は、メインコンテンツとは関連性の低い『補足記事・サイドバー・広告・ブログロール』などに使用しますが、メインコンテンツの中で使う場合と、外で使う場合で意味が変わってくるので注意する必要があります。

例えば、メインコンテンツの中で使う場合はメインコンテンツに何かしら関連がなくてはなりません。逆にメインコンテンツの外で使う場合はサイトや、ページ全体に関連性があることを示します。

また、aside要素はセクショニング・コンテンツの１つになりますが、見出しが無い場合でもデフォルトでSidebar等(UAによって異なる)の見出しを持っているので無理に見出しをつける必要は無いようです。

では、実際にaside要素を用いたサンプルを作りながらより理解を深めていきたいと思います。

aside要素をメインコンテンツの中で使用

メインコンテンツを表すarticle要素内に、aside要素を使用した例としてブログの記事を使って確認したいと思います。

<article>
	<h1>HTML5でサイトをつくろう</h1>
    <section>
    	<h2>『aside要素』 / HTML5新要素一覧</h2>
        <p>aside要素はHTML5の新要素の一つです。</p>
        <aside>
        	<h3>HTML5とは</h3>
            <p>HTML5は次世代HTML標準となる・・・・・</p>
        </aside>
        <p>aside要素でマークアップする場合は、メインコンテンツとは関連性が薄く、切り離すことができるセクションに使用します。</p>
        ・
        ・
        ・
    </section>  
</article>

上記は、ブログ記事の補足情報をaside要素でマークアップした例です。上記補足情報をaside要素でマークアップしても問題ないかを確認していきます。

まず、ブログ記事内で出てきた｢HTML5｣という単語の補足説明を行っているので記事との関連性があることがわかります。次にaside要素内の文章を切り離した場合、記事内容はaside要素についての説明なのでHTML5の補足情報が無くても問題ないと考えることができなす。ブログ記事に関連性が有り文章で切り離した場合でもその記事が成り立っていることこから、補足記事をaside要素でマークアップしても問題ないと判断できます。

尚、その他にもプル・クォートやあまり重要で無いコメントなどもメインコンテンツ内でaside要素を使用することができるようなので、これらの要素でも今後確認してメモをしようと考えています。

aside要素をメインコンテンツの外で使用

サイドバーエリアにあるバナー広告をaside要素でマークアップした例を考えてみます。

<aside>
    <ul>
    　<li><img src="./banner01.gif" alt="HTML5関連の広告01です。" /></li>
    　<li><img src="./banner02.gif" alt="HTML5関連の広告02です。" /></li>
    　<li><img src="./banner03.gif" alt="HTML5関連の広告03です。" /></li>
    </ul>
</aside>

上の画像はサイトの大まかなレイアウトを表し、『広告エリア』のソースをその下に記述しました。広告エリア内のバナー画像をaside要素でマークアップした例です。

広告などの情報が、メインコンテンツ外側でaside要素を使用しマークアップできるかを確認したいと思います。

通常、バナー広告はメインコンテンツに直接的に関わらないので、メインコンテンツ内にaside要素を使用してのマークアップには適していません。そこで今回のサンプルでは、コンテンツエリアの外側、上の画像のようにサイドバーエリアに出してマークアップしています。

バナー広告はページから切り離してもページに問題が起こるとは考えにくいのでメインコンテンツから切り離すことができる要素だとすぐにわかります。また、広告は間接的にサイトやページに関連していることから、上記のバナー広告はメインコンテンツの外側でaside要素でマークアップしても問題ないことが分かります。

参考サイト：

• HTML5についてのおさらい　【 W3G】
• aside を見直す　【HTML5.JP】
• aside 要素　【HTML5.JP】

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

ブログを作成する際に参考にした本はこちらにまとめてあります。