このページの本文へ

HTML5セクション要素のまとめ

2011年11月02日 13時09分更新

浜 俊太朗/ライブドア

  • この記事をはてなブックマークに追加
本文印刷

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

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

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

ss/design_me01.psd

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

正しい例


<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>

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

ss/design_me02.psd

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

誤った例


<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」(毎日コミュニケーションズ刊)がある。趣味はカメラとネットゲームと椅子。

この連載が本になりました!

「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー&デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き!

HTML5マークアップ 現場で使える最短攻略ガイド

定価:2,808円 (本体2,600円)/形態:B5変 (240ページ)
ISBN:978-4-04-866070-9

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く