HTML5の基本的なマークアップ

HTML5の新要素を使用して、基本的なHTMLの構造を作りたいと思います。もちろん、サイトのデザインによりマークアップの仕方は変わってきますが、ここでは単純な枠組みでシンプルなものを作ります。

ヘッダー部分のマークアップ

まずは、ヘッダー部分をマークアップしていきます。

従来のマークアップ

<div id="header">
   <h1>サイトロゴ</h1>
   <ul id="global-navi">
      <li>ナビゲーション</li>
      <li>ナビゲーション</li>
      <li>ナビゲーション</li>
      <li>ナビゲーション</li>
      <li>ナビゲーション</li>
   </ul>
</div>

HTML5を使用したマークアップ

<header>
   <h1>サイトロゴ</h1>
   <nav id="global-navi">
      <ul>
         <li>ナビゲーション</li>
         <li>ナビゲーション</li>
         <li>ナビゲーション</li>
         <li>ナビゲーション</li>
         <li>ナビゲーション</li>
      </ul>
   </nav>
</header>

まず、header要素で全体を囲んでいます。そして、グローバルナビゲーションにはnav要素を追加して、その中にナビゲーションを入れています。このnav要素は他にも、フッターナビゲーションやパンくずなどにも使用したりする場合もありますが、一番のメインで使うとしたらグローバルナビゲーションかと思います。

コンテンツ部分のマークアップ

次に、コンテンツ部分のマークアップをします。ここでは、基本的な2カラムのレイアウトにします。

従来のマークアップ

<div id="contents">
      <h2>見出し</h2>
      <p>テキストテキストテキストテキスト</p>
      <h3>見出し2</h3>
      <p>テキストテキストテキストテキスト</p>
   </div>
   <div id="side">
      <ul class="bnr">
         <li>バナー</li>
         <li>バナー</li>
         <li>バナー</li>
      </ul>
   </div>

HTML5を使用したマークアップ

<div id="contents">
      <section>
         <h2>見出し</h2>
         <p>テキストテキストテキストテキスト</p>
         <section>
            <h3>見出し2</h3>
            <p>テキストテキストテキストテキスト</p>
         </section>
      </section>
   </div>
   <div id="side">
      <aside>
         <ul class="bnr">
            <li>バナー</li>
            <li>バナー</li>
            <li>バナー</li>
         </ul>
      </aside>
   </div>

各見出しとその内容をそれぞれsection要素で分けて、アウトラインを作っていきます。基本的に、section直後には見出しがくるように組むと良いでしょう。
そして、バナーを設置した部分には、aside要素で囲んでいます。これは、コンテンツには関連しているが、あまり重要ではない補助的なナビゲーションとして扱っているので、aside要素を使用しています。

フッター部分のマークアップ

最後に、フッター部分をマークアップしていきます。

従来のマークアップ

<div id="footer">
   <p>copyright</p>
</div>

HTML5を使用したマークアップ

<footer>
  <p><small>copyright</small></p>
</footer>

まず、全体をfooter要素で囲んでいます。そして、コピーライトはsmall要素で囲むようにしています。small要素は著作権表記など細目に使用したりします。

以上で、HTML5を使った基本的なマークアップとなります。それぞれのタグの意味合いなどを理解し、正しいマークアップをし、アウトラインを形成するように心がけると良いでしょう。