PR

 XHTMLの制作でもっとも難しいのは「どの要素を使ってマークアップするか」という判断である。正解がひとつの場合もあれば、ふたつ以上の場合もある。人間の判断に負う部分も大きいので、あるマークアップを適切に感じる人もいれば感じない人もいる。シチュエーションごとの一般的なマークアップ例を見ていこう。

ナビゲーションはul要素でマークアップ

 ナビゲーションはul要素(順不同リスト)でマークアップするのが基本だ。項目(ボタン)それぞれを縦に並べるか横に並べるかはCSSで自由にコントロールできる。大切なのは、「並列的に列挙するコンテンツにはul要素を使う」という判断が先にあり、見栄えをどうするか考えるのは後の話ということだ。

中部大学はナビゲーション類をul要素で適切にマークアップしている
中部大学はナビゲーション類をul要素で適切にマークアップしている
[画像のクリックで拡大表示]

中部大学はナビゲーション類をul要素で適切にマークアップしている
中部大学はナビゲーション類をul要素で適切にマークアップしている
[画像のクリックで拡大表示]

 ひとくにナビゲーションといっても、さまざまなコンテンツが考えられる。たとえば以下のようなものがある。

 ・グローバルナビゲーション(サイト内の主要カテゴリーのリンクリスト)
 ・ローカルナビゲーション(カテゴリー内またはページ内のリンクリスト)
 ・ユーティリティ(サイトのご利用方法、アクセス、サイトマップ、お問い合わせなどのリンクリスト)
 ・ポリシー(個人情報保護方針、セキュリティ方針、著作権・免責事項などのリンクリスト)

 たとえば「ポリシー」を考えてみると、ページの最下部、つまりフッター部分に含められることが多い。フッター部分では、コピーライト表記をあわせて示すのが一般的といってよいが、どちらも含めた場合のマークアップ例を以下に示そう。

<div id="footer">
<ul>
<li><a href="...">個人情報保護方針</a></li>
<li><a href="...">セキュリティ方針</a></li>
<li><a href="...">著作権・免責事項</a></li>
</ul>
<address>
Copyright &copy; xxx, Inc. All Rights Reserved.
</address>
</div>
ポリシーとコピーライト表記のマークアップ例

ナビゲーションに見出しをつける場合

 もう一歩踏み込んで、ナビゲーションをul要素で示すだけでなく、その直前に見出しをつけておく方法も利用される。たとえばグローバルナビなら「主なカテゴリー」といった文言を見出に含めておく(ターゲットユーザーのリテラシーレベルによっては、丁寧な言い回しでよりわかりやすく書く)。マークアップ例を示すと次のとおりだ。

<div id="globalnav">
<h2>主なカテゴリー</h2>
<ul>
<li><a href="...">ホーム</a></li>
<li><a href="...">製品</a></li>
<li><a href="...">サービス</a></li>
<li><a href="...">サポート</a></li>
<li><a href="...">会社情報</a></li>
</ul>
</div>
グローバルナビに「主なカテゴリー」という見出しをつけた例

 このように示した見出しは、ビジュアルブラウザで見える状態にしておく必要はないケースがほとんどであるから(つまり音声ブラウザやテキストブラウザなどCSSが利用できない環境で利用できればよいため)、CSSで不可視化しておく。

 なお、「パンくずリスト」(トピックパス。ホームからそのページまでの軌跡を示したもの)にul要素を利用しているケースもよく見受けられる。個人的には、必ずしもul要素を使う必要はないと考えるが、もし使うのであれば次のようにマークアップする。

<div id="topicpath">
<h2>サイト内でのこのページの位置</h2>
<ul>
<li><a href="...">ホーム</a> &gt;</li>
<li><a href="...">サポート</a> &gt;</li>
<li>ビジネスサポート</li>
</ul>
</div>
パンくずリストにul要素を使う場合のマークアップ例