メインコンテンツ内の各セクション
メインコンテンツ内は、見出しと文章を1つのセットとして、section要素でマークアップしていきます。
<section>
<h3 id="coffeeStory">コーヒーのお話</h3>
<p>古代アラビアで...
---略---
<p><a href="#pageTop"><img src="coffee_files/pagetop-ovoff.gif" alt="ページの先頭へ戻る" height="10" width="107" /></a></p>
</section>
小見出しのあるセクションは、セクションを入れ子にして記述します。
<section>
<h3 id="coffeeLegend">コーヒーの伝説</h3>
<section>
<h4>コーヒーの伝説</h4>
<p>さまざまな神話と神秘に...</p>
</section>
<section>
<h4>ヤギ飼いが発見したコーヒーの実</h4>
<p>あるヤギ飼いが、ヤギたちが...</p>
</section>
---略---
<p class="pageTop"><a href="#pageTop"><img src="coffee_files/pagetop-ovoff.gif" alt="ページの先頭へ戻る" height="10" width="107" /></a></p>
</section>
新要素：section
section要素は、一般的なセクションを表します。セクションは見出しと内容で構成されるので、基本的には見出しが必要です。
注意点としては、「section要素は新しいdiv要素ではない」ということです。HTML5で書かれたサイトの中には、まるでdiv要素の代わりのようにsection要素を使っている場合があります。section要素はあくまでセクションを明示するための要素であり、div要素のようなコンテナ要素ではありません。
右カラム
右カラムにあるローカルナビゲーション「コーヒーへのこだわり」部分をaside要素でマークアップします。
<aside>
<h2><a href="http://www.starbucks.co.jp/story/"><img src="coffee_files/lnav-story-ovoff.gif" alt="コーヒーへのこだわり" height="90" width="200" /></a></h2>
<ul>
<li><a href="http://www.starbucks.co.jp/story/farmer.html">ファーマーストーリー</a></li>
<li><a href="http://www.starbucks.co.jp/story/coffee.html">コーヒーのお話</a></li>
</ul>
</aside>
新要素：aside
aside要素は、そのコンテンツに関係はしているものの、切り離すことができるものに使用します。主な用途にサイドバーや広告、補足記事などがあります。この例では、aside要素の内容がarticle要素の内容（本文）に薄く関係しているので、aside要素はarticle要素の中に記述しています。
バナーエリア
フッターの上にあるバナーエリアもaside要素でマークアップします。
<aside>
<h2><img src="coffee_files/t-pickup.gif" alt="Pick Up Contents" height="25" width="103" /></h2>
<ul>
<li><a href="http://www.starbucks.co.jp/howto/" target="_parent"><img src="coffee_files/pickup-bn-004.jpg" alt="How to STARBUCKS" height="79" width="280" /></a></li>
---略---
</ul>
</aside>
フッターのバナーはarticle要素の内容（本文）とは別の内容へのリンクなので、article要素とは関係の無い内容です。そこでこのaside要素は、article要素の外に記述しています。
サイトフッター
細かいリンクやコピーライトなどが記述されているサイトフッターをfooter要素でマークアップします。
<footer>
<ul>
<li>
<p><a href="http://www.starbucks.co.jp/coffee/">コーヒー</a></p>
---略---
<p class="copyright">©2011 Starbucks Coffee Company. All Rights Reserved.</p>
</footer>
新要素：footer
footer要素は、そのセクションのフッターを表します。主な用途に、著作権表示や関連ページのリンクなどがあります。大きめのフッターによく見られる、リスト状のナビゲーションなどもここに含められるでしょう。
今回のサンプルでは登場しませんが、サイト全体のフッターだけでなく、各セクションのフッターとしても使えます。
フッター内コンテンツ
フッターの中にある、「How to STARBUCKS」と「Mobile Site」をsection要素でマークアップします。
<section>
<h2><a href="http://www.starbucks.co.jp/howto/">How to STARBUCKS</a></h2>
<ul>
<li><a href="http://www.starbucks.co.jp/howto/store/">お店で楽しむ</a></li>
<li><a href="http://www.starbucks.co.jp/howto/coffee/">コーヒーを楽しむ</a></li>
<li><a href="http://www.starbucks.co.jp/howto/office/">オフィスで楽しむ</a></li>
<li><a href="http://www.starbucks.co.jp/howto/download/">ダウンロードアイテム</a></li>
</ul>
</section>
<section>
<h2><img src="coffee_files/footer-mobile-txt.gif" alt="Mobile Site" height="10" width="64" /></h2>
<p><img src="coffee_files/footer-mobile-qr.gif" alt="携帯電話で以下のURLにアクセスしてください。" height="55" width="55" /></p>
<p>www.starbucks.co.jp</p>
</section>
フッターの中にsection要素が存在することに違和感があるかもしれませんが、仕様上の問題はありません。
ポイント
セクションに関しては本連載の第3回以降でさらに詳しく解説します。
