Web標準の基礎と実践

第19回 XHTMLの設計～状況に合った要素選び（4）～

2007/03/16
益子貴寛

記事一覧へ >>

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

dl要素の多様な使い方

　dl要素（定義リスト）は多様な用途に利用される。本来は「definition list」、つまり「用語」と「解説」を対応させてるリストに利用する要素であるが、XHTMLでは「ある内容」と「ある内容」を直接的に対応させるための要素がないため、dl要素をやや拡大解釈をし、さまざまな目的で利用するのが一般的だ。例をあげると次のとおりである。

新着情報（日付と内容）
お問い合わせフォーム（名前、Eメール、内容などのラベルと入力欄）
カテゴリーリスト（カテゴリー名と説明）
会社案内（社名、代表者名、所在地などの項目と内容）
会社沿革（年月と出来事）
よくある質問（質問と答え）

　新着情報のマークアップを見てみよう。dl要素で全体をラップし、子要素dtで「日付」を、子要素ddで「内容」をマークアップする。dtとddのセットを必要な数だけ含める。

<dl>
  <dt>2007年3月21日</dt>
  <dd><a href="nextweb/2007/index.html">Web次世代フォーラム主催 
Next Web 2007を5月25日に開催</a></dd>
  <dt>2007年3月10日</dt>
  <dd><a href="learning/css/index.html">CSS初心者ハンズオンセミナー開催
</a></dd>
  <dt>2007年2月26日</dt>
  <dd><a href="exhibition/index.html">情報産業プロダクト展に出展します
</a></dd>
</dl>

新着情報をdl要素でマークアップした例

※ 新着情報以外のマークアップ例は、筆者が2006年7月にアップルストア銀座で開催した「XHTML+CSS (r)evolution」のスライド資料で詳しく解説しているので、参考にしてほしい。

　比較のため、dl要素を使わずにマークアップする従来のケースを見てみよう。もっともシンプルなのは「日付」と「内容」のセットをp要素でマークアップし、改行をbr要素で行う方法である。あるいは、ul要素を利用し、li要素それぞれに「日付」と「内容」のセットを含める方法もあるだろう。

<p>2007年3月21日<br />
<a href="nextweb/2007/index.html">Web次世代フォーラム主催 Next Web
 2007を5月25日に開催</a></p>

<p>2007年3月10日<br />
<a href="learning/css/index.html">CSS初心者ハンズオンセミナー詳細
決定</a></p>

<p>2007年2月26日<br />
<a href="exhibition/index.html">情報産業プロダクト展に出展します</a></p>

新着情報をp要素でマークアップした例

　table要素を使い、左のセルに「日付」を、右のセルに「内容」を置く方法もある。構造的にも、「日付」を見出しセル、「内容」をデータセルと見なし、「新着情報の一覧表」という解釈のもとでマークアップするのは不自然ではない。

　つまり、新着情報を必ずdl要素でマークアップしなければならない、ということではなく、現在与えられているボキャブラリの範囲内で、さまざまな人がベターなマークアップを模索した結果として、dl要素を利用する方法をよく見受けるようになってきた、ということである。

dl要素の構造上のメリット

　dl要素の構造上のメリットとしては、「ある内容」と「ある内容」を直接対応させ、明確に構造化できること以外にも、ふたつの点があげられる。

ddにはブロックレベル要素を含めることができるので、複雑な内容のマークアップにも対応できる。ddの内容量が多い場合は、適度な長さごとにp要素でマークアップしたり、リスト（ul要素やol要素）を含めることもできる
dtとddはお互いに複数対応させることができるので、たとえばひとつの「日付」に対して別々の「内容」を立てることができる。

<dl>
  <dt>2007年3月21日</dt>
  <dd><a href="services/autoweb/index.html">Web構築の新サービス
「AutoWeb」を開始</a></dd>
  <dd><a href="nextweb/2007/index.html">Web次世代フォーラム主催 
Next Web 2007を5月25日に開催</a></dd>
  <dt>2007年3月10日</dt>
  <dd>
    <p><a href="learning/css/index.html">CSS初心者ハンズオンセミナー
</a>の詳細が決定しました。計3回、次のカリキュラムで実施します。</p>
    <ol>
      <li>CSSの役割と書式</li>
      <li>CSSのセレクタとプロパティ</li>
      <li>CSSの基本設計と応用設計</li>
    </ol>
  </dd>
  <dt>2007年2月26日</dt>
  <dd><a href="exhibition/index.html">情報産業プロダクト展に出展します
</a></dd>
</dl>