浜 俊太朗のHTML5マークアップ移行ガイド ― 第2回

XHTML1.0とHTML5の違いをスタバのページで紹介 (3/6)

セクション関連要素でセクションを明示する

　div要素の無いシンプルなソースコードが用意できたら、HTML5コーディングにおける大きなポイントである、「セクションの明示」をします。

　「セクション」という単語に耳慣れない方もいるかもしれません。セクションとは文書中の一区分のことで、具体的には、「見出しと、見出しに対応する内容である文章や画像のかたまり」を指します。HTML5では、見出しと内容を一区分として、セクション関連要素で囲めます。

　以降の解説にはデザインとコードを比較しやすいように完成時のサイトデザインを載せていますが、実際に自分でセクションを考えるときには、できるだけデザインのことを考えずに、文書（主にソースコード）のみを見て作業を進めることをおすすめします。デザインに囚われすぎると、特に不慣れなうちはセクションに影響してしまうことがあるためです。

ポイント

実務上は、デザインとコーディングが分業されていたり、情報の伝達が不十分だったりして、デザインから文脈を読み取る必要に迫られる場合もあるでしょう。その場合は、一概に「デザインを見ないように」とは言えない面もあります。

サイトヘッダー

　サイトのロゴやナビゲーションなどが記述されているサイトヘッダーを、header要素でマークアップします。

<header>
 <h1><a href="http://www.starbucks.co.jp/"><img src="coffee_files/logo.gif" alt="スターバックス コーヒー" height="62" width="207" /></a></h1>
 <ul>
  <li><a href="http://www.starbucks.co.jp/en/"><img src="coffee_files/nav-global-01-ovoff.gif" alt="English" height="12" width="44" /></a></li>
---略---
 <p><a href="http://www.starbucks.co.jp/">ホーム</a> &gt; <a href="http://www.starbucks.co.jp/coffee/">コーヒー</a> &gt; <a href="http://www.starbucks.co.jp/story/">コーヒーへのこだわり</a> &gt; コーヒーのお話</p>
</header>

新要素：header

　header要素は、そのセクションにおけるヘッダーを示します。主な用途に、ページの上部によくあるサイトヘッダーや、ブログで記事タイトルや投稿日などが配置されたコンテンツヘッダーがあります。

メインナビゲーション

　サイトヘッダーの中にはul要素でマークアップされたグローバルナビゲーションがあります。ul要素をさらにnav要素で囲みます。

<nav>
 <ul>
  <li>
   <p><a href="http://www.starbucks.co.jp/coffee/"><img src="coffee_files/mnav-coffee-off.jpg" alt="Coffee" height="24" width="98" /></a></p>
   <p><a href="http://www.starbucks.co.jp/coffee/">コーヒー トップ</a></p>
   <ul>
    <li><a href="http://store.starbucks.co.jp/coffee/lineup/">コーヒー豆</a></li>
---略---
 </ul>
</nav>

新要素：nav

　nav要素は、主要なナビゲーションを意味します。この「主要」という点が重要で、すべてのa要素に手当たり次第に使用してはいけません。何が主要なのかは、ページ作成者の意図に委ねられる部分が大きいでしょう。

メインコンテンツ

　このページのメインコンテンツである、「コーヒーのお話」をarticle要素でマークアップします。

<article>
 <h2>コーヒーのお話</h2>
---略---
 <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>
</article>

　article要素には右カラムに配置される「コーヒーへのこだわり」のローカルナビゲーションも含まれています。

新要素：article

　article要素は、判断が難しい要素の1つです。使用にあたっては、本当にarticleを使うのが適切かどうか、よく検討する必要があります。article要素は、ブログのエントリーやニュースサイトの記事のように、単体で独立しても成り立つものを表します。判断のヒントにできる材料は、「フィードで配信される（と仮定した）際に、article要素の内容が1エントリーとして成り立つかどうか」があります。

ポイント

メインコンテンツ＝article要素ではありません。詳しくは今後の連載で解説します。

コンテンツヘッダー

　メインコンテンツのタイトルやソーシャルサービスボタン、ショートカットナビゲーションなどはheader要素で囲みます。

<article>
<header>
 <h2>コーヒーのお話</h2>
 <ul>
  <li><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.starbucks.co.jp/story/coffee.html" data-via="Starbucks_J" data-count="none">Tweet</a><script src="http://platform.twitter.com/widgets.js"></script></li>
---略---
  <li><a href="#blend">ブレンド</a></li>
 </ul>
</header>

　このheader要素は、さきほどロゴなどのサイトヘッダーをマークアップしたheader要素と同じものです。header要素は、ページのヘッダーだけに限らず、コンテンツごとのヘッダーにも使用できます。