XHTMLの制作でもっとも難しいのは「どの要素を使ってマークアップするか」という判断である。正解がひとつの場合もあれば、ふたつ以上の場合もある。人間の判断に負う部分も大きいので、あるマークアップを適切に感じる人もいれば感じない人もいる。シチュエーションごとの一般的なマークアップ例を見ていこう。
dl要素の多様な使い方
dl要素（定義リスト）は多様な用途に利用される。本来は「definition list」、つまり「用語」と「解説」を対応させてるリストに利用する要素であるが、XHTMLでは「ある内容」と「ある内容」を直接的に対応させるための要素がないため、dl要素をやや拡大解釈をし、さまざまな目的で利用するのが一般的だ。例をあげると次のとおりである。
- 新着情報（日付と内容）
- お問い合わせフォーム（名前、Eメール、内容などのラベルと入力欄）
- カテゴリーリスト（カテゴリー名と説明）
- 会社案内（社名、代表者名、所在地などの項目と内容）
- 会社沿革（年月と出来事）
- よくある質問（質問と答え）
新着情報のマークアップを見てみよう。dl要素で全体をラップし、子要素dtで「日付」を、子要素ddで「内容」をマークアップする。dtと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 |
| 新着情報をp要素でマークアップした例 |
table要素を使い、左のセルに「日付」を、右のセルに「内容」を置く方法もある。構造的にも、「日付」を見出しセル、「内容」をデータセルと見なし、「新着情報の一覧表」という解釈のもとでマークアップするのは不自然ではない。
つまり、新着情報を必ずdl要素でマークアップしなければならない、ということではなく、現在与えられているボキャブラリの範囲内で、さまざまな人がベターなマークアップを模索した結果として、dl要素を利用する方法をよく見受けるようになってきた、ということである。
dl要素の構造上のメリット
dl要素の構造上のメリットとしては、「ある内容」と「ある内容」を直接対応させ、明確に構造化できること以外にも、ふたつの点があげられる。
- ddにはブロックレベル要素を含めることができるので、複雑な内容のマークアップにも対応できる。ddの内容量が多い場合は、適度な長さごとにp要素でマークアップしたり、リスト（ul要素やol要素）を含めることもできる
- dtとddはお互いに複数対応させることができるので、たとえばひとつの「日付」に対して別々の「内容」を立てることができる。
<dl> |
| 情報量の多い新着情報をdl要素でマークアップした例 |
