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

HTML5セクション要素のまとめ (5/5)

デザインに合わせたマークアップに注意しよう

　前回の記事でも解説しましたが、section要素などの「セクションを明示する要素」はdiv要素の代わりではありません。デザインだけを見ながらマークアップをする環境では、どうしてもミスをする可能性があるので気を付けましょう。

　たとえば、以下のようなデザインがあったとします。

　このデザインをソースコードにあてはめるなら、以下のようになるでしょう。

正しい例

<section>
 <h1>おすすめカメラショップ</h1>
 <ul>
  <li><a href="http://example.com/">ミカン社</a></li>
  <li><a href="http://example.com/">スキヤキカメラ</a></li>
  <li><a href="http://example.com/">モップカメラ</a></li>
 </ul>
</section>

　では、以下のようなデザインの場合はどうでしょうか。

　先ほどのデザインと似ていますが、深く考えずにマークアップすると次のように書いてしまうことがあります。

誤った例

<h1>おすすめカメラショップ</h1>
<section>
 <ul>
  <li><a href="http://example.com/">ミカン社</a></li>
  <li><a href="http://example.com/">スキヤキカメラ</a></li>
  <li><a href="http://example.com/">モップカメラ</a></li>
 </ul>
</section>

　見出しがsection要素の外に出ているので、アウトラインが正しく判別されません。正しくは以下のようになります。

正しい例

<section>
 <h1>おすすめカメラショップ</h1>
 <div>
  <ul>
   <li><a href="http://example.com/">ミカン社</a></li>
   <li><a href="http://example.com/">スキヤキカメラ</a></li>
   <li><a href="http://example.com/">モップカメラ</a></li>
  </ul>
 </div>
</section>

　section要素はあくまでも「セクションを明示する要素」ですので、デザインの都合で要素が足りない場合はsection要素ではなくdiv要素を使いましょう。

ポイント

　HTML5に慣れるまでは、デザインを見ずにセクションを明示するのも1つの方法です。

次回は、コンテンツモデルとカテゴリーを解説

　今回解説した各要素の冒頭には、「コンテンツモデル」や「カテゴリー」、「この要素が使える文脈」といった項目があります。これらはセクションやアウトラインと並んで、HTML5コーディングのポイントとなる部分です。詳しくは、次回解説します。

著者：浜　俊太朗 （はま・しゅんたろう）

ライブドアで働くマークアップエンジニア／ディレクター。
ブログ「hamashun.me」はコーディングに限定せずさまざまな話題を扱っている。主な著書に「一週間でマスターするXHTML & CSS for Windows」（毎日コミュニケーションズ刊）がある。趣味はカメラとネットゲームと椅子。