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

ul要素とol要素の使い分け

　ul要素（順不同リスト）とol要素（順序リスト）のどちらを使うかは、文字どおり「項目の並び順が問われるかどうか」で判断する。たとえば、好きなケーキの種類を3つ示すとしよう。3つとも同等に好きならばul要素を利用する。もし好きの程度に差があるならばol要素を利用し、好きな順番で列挙する。


<ul>
  <li>チーズケーキ</li>
  <li>ショートケーキ</li>
  <li>チョコレートケーキ</li>
</ul>
3つとも同等に好きならばul要素を利用する
 

<ol>
  <li>ショートケーキ</li>
  <li>チョコレートケーキ</li>
  <li>チーズケーキ</li>
</ol>
3つの好きの程度に差があるならばol要素を利用し、好きな順番で列挙する

　上記は簡単な例だったが、順番がなさそうであり、ありそうでない難しいシチュエーションもある。前回、ナビゲーション類にはul要素を利用するのが一般的と述べた。つまり、ナビゲーションに含まれるリンク項目は、まったくの順不同ということになる。

　しかし、グローバルナビゲーションで「ホーム」を最後の項目とすることには、違和感を覚える人がほとんどではないだろうか。つまり、「ホーム」を最初（横に並べている場合は一番左、縦に並べている場合は一番上）の項目とするのが、これまでの慣習上は自然ということである。

ファミリーマートのWebサイトも、グローバルナビゲーションの最初の項目は「ホーム」である
ファミリーマートのWebサイトも、グローバルナビゲーションの最初の項目は「ホーム」である 　[画像のクリックで拡大表示]

　このように、いくら順不同とはいえ、慣習的な判断のもとで順番を決めるべきシチュエーションがある。現在のXHTMLに用意されているボキャブラリの限界が表れている例であり、Web制作者は「仕様」から演繹的に判断するだけでなく、「一般的なマークアップ実務」を観察し、帰納的に判断することが求められるということである。

　なお、現在W3Cで策定中の「XHTML 2.0」という新たな仕様では、ナビゲーション類をマークアップするためのnl要素（navigation list）が追加され、さらにlabel要素を見出しとして利用できるようになる予定である（また、href属性はa要素やlink要素だけでなく、li要素などでも利用できるようになる予定）。

<nl>
  <label>主なカテゴリー</label>
  <li href="...">ホーム</li>
  <li href="...">製品</li>
  <li href="...">サービス</li>
  <li href="...">サポート</li>
  <li href="...">会社情報</li>
</nl>
XHTML 2.0ではnl要素が追加され、label要素を見出しとして利用できる予定だ

リストの「入れ子」をうまく使う

　リスト項目であるli要素には、テキストやインライン要素だけでなく、ブロックレベル要素を含むことができる。li要素にul要素やol要素を含めることで、リストのなかでリストを示す（リストを入れ子にする）ことができる。カテゴリーリストとサブカテゴリーリストを同居させるときなどに、このテクニックを利用する。

<div id="category-list">
  <h2>カテゴリーリスト</h2>
  <ul>
    <li>
      <a href="...">カテゴリー1</a>
      <ul>
        <li><a href="...">サブカテゴリー1-1</a></li>
        <li><a href="...">サブカテゴリー1-2</a></li>
        <li><a href="...">サブカテゴリー1-3</a></li>
      </ul>
    </li>
    <li>
      <a href="...">カテゴリー2</a>
      <ul>
        <li><a href="...">サブカテゴリー2-1</a></li>
        <li><a href="...">サブカテゴリー2-2</a></li>
        <li><a href="...">サブカテゴリー2-3</a></li>
      </ul>
    </li>
    <li>
      <a href="...">カテゴリー3</a>
      <ul>
        <li><a href="...">サブカテゴリー3-1</a></li>
        <li><a href="...">サブカテゴリー3-2</a></li>
        <li><a href="...">サブカテゴリー3-3</a></li>
      </ul>
    </li>
  </ul>
</div>
リストの「入れ子」の例

　注意すべきは、第1階層と第2階層（もしそれ以下の階層があるなら、それらの階層も）が、視覚的に容易に区別できるようにする点である。ともすれば、どの項目がどの階層にあるのかがわかりづらくなってしまう恐れがあるので、CSSでスタイルを設定する際に思い出そう。

　音声読み上げを考えた場合、リストを複雑に階層化しても、ユーザーに適切に伝わらない可能性が高い。テキストによる補足情報を随所に含めておき、ビジュアルブラウザでは不可視化されるようにCSSで設定するとよいだろう。

<div id="category-list">
  <h2>カテゴリーリスト</h2>
  <ul>
    <li>
      <span>（カテゴリー1 ここから）</span>
      <a href="...">カテゴリー1</a>
      <span>（カテゴリー1のサブカテゴリー ここから）</span>
      <ul>
        <li><a href="...">サブカテゴリー1-1</a></li>
        <li><a href="...">サブカテゴリー1-2</a></li>
        <li><a href="...">サブカテゴリー1-3</a></li>
      </ul>
      <span>（カテゴリー1のサブカテゴリー ここまで）</span>
      <span>（カテゴリー1 ここまで）</span>
    </li>
    <li>
      <span>（カテゴリー2 ここから）</span>
      <a href="...">カテゴリー2</a>
      <span>（カテゴリー2のサブカテゴリー ここから）</span>
      <ul>
        <li><a href="...">サブカテゴリー2-1</a></li>
        <li><a href="...">サブカテゴリー2-2</a></li>
        <li><a href="...">サブカテゴリー2-3</a></li>
      </ul>
      <span>（カテゴリー2のサブカテゴリー ここまで）</span>
      <span>（カテゴリー2 ここまで）</span>
    </li>
    <li>
      <span>（カテゴリー3 ここから）</span>
      <a href="...">カテゴリー3</a>
      <span>（カテゴリー3のサブカテゴリー ここから）</span>
      <ul>
        <li><a href="...">サブカテゴリー3-1</a></li>
        <li><a href="...">サブカテゴリー3-2</a></li>
        <li><a href="...">サブカテゴリー3-3</a></li>
      </ul>
      <span>（カテゴリー3のサブカテゴリー ここまで）</span>
      <span>（カテゴリー3 ここまで）</span>
    </li>
  </ul>
</div>
音声読み上げを意識したリストの「入れ子」の例
 

div#category-list span {
  height: 0;
  overflow: hidden;
  }
音声読み上げ向けテキストをCSSで不可視化