16.3.10 箇条書き

箇条書き (リスト) も，おなじみの文章構造でしょう． HTML では，順不同リスト，順序つきリスト，定義リストの3種類の箇条書き構造があります．

順不同リスト (unordered list) は，項目の順序がそれほど意味のない箇条書きです． ul 要素で表します． サンプルページにあった次のようなものは順不同リストです．

<ul>
<li>音楽鑑賞</li>
<li>映画鑑賞</li>
<li>絵画鑑賞</li>
<li>読書</li>
</ul>

次のように表示されます．

• 音楽鑑賞
• 映画鑑賞
• 絵画鑑賞
• 読書

一方，順序つきリスト (ordered list) は，項目の順序に意味のある箇条書きです． ol 要素で表します．順序つきリストの例を示します． このように，順不同リストと違って，普通は項目に番号を付けて表示されます．

1. リスト1
2. リスト2
3. リスト3

サンプルページの順不同リストを順序付きリストに変更してみると，次のようになります．

<ol>
<li>音楽鑑賞</li>
<li>映画鑑賞</li>
<li>絵画鑑賞</li>
<li>読書</li>
</ol>

1. 音楽鑑賞
2. 映画鑑賞
3. 絵画鑑賞
4. 読書

順不同リストや順序つきリストのそれぞれの項目は， li (list item) 要素で表します． li 要素は， ul 要素や ol 要素の内部にしか出てくることのない要素です．

定義リスト (definition list) とは，用語とその説明の対のリストです． しかしそれ以外の目的で使ってはならないということはありません． dl 要素で表します． 用語は dt (term) 要素で，説明は dd (description) 要素で表します． dt 要素と dd 要素は， dl 要素の内部にしか出てくることのない要素です．

3種類の箇条書き構造の説明を，定義リストを使ってまとめてみましょう．

<dl>
<dt>順不同リスト (ul 要素)</dt><dd>項目の順序がそれほど意味のない箇条書き．項目は li 要素．</dd> 
<dt>順序つきリスト (ol 要素)</dt>
  <dd>項目の順序に意味のある箇条書き．項目に番号を付けて表示される．項目は li 要素． </dd> 
<dt>定義リスト (dl 要素)</dt><dd>用語とその説明の対のリスト．用語は dt 要素，説明は dd 要素．</dd> 
</dl>

順不同リスト (ul 要素)

項目の順序がそれほど意味のない箇条書き．項目は li 要素．

順序つきリスト (ol 要素)

項目の順序に意味のある箇条書き．項目に番号を付けて表示される．項目は li 要素．

定義リスト (dl 要素)

用語とその説明の対のリスト．用語は dt 要素，説明は dd 要素．

HTML の箇条書き構造に関する注意として，それぞれの項目 (li 要素と dd 要素) の中には，段落や箇条書きなどの文章構造を入れることができるということがあります (dt 要素には文章構造は入りません)． 箇条書きの中に箇条書きがあるとき，「入れ子になっている」といいます．