リスト
Updated / Published
リストは情報を見やすく整理して表現することができます。ひとつの文書を作成するにあたって、基本は見出しと段落だけで構成することができますが、並列的に箇条書きする内容や、順序立てた説明が必要な内容の場合は、リスト（一覧）として提供した方が情報の内容をよりわかりやすく表現する（伝える）ことができる場合があります。
情報には性質があるように、ある情報をひとつひとつの段落で区切って提供する場合よりも、ひとつのリスト（一覧）として提供した方が、その情報の内容を伝えやすい・表現しやすいという場合は、これから説明するリスト要素を使って情報をわかりやすく整理して提供してみましょう。なお、情報の内容が年表・数表など表を組んで提供する必要のある場合には、表（テーブル）としてマーク付けして情報を提供します。
このように HTML を使って情報を提供する場合、まず制作者は、その情報の内容判断を行った上で、情報の性質にあった適切なマーク付けを行います。情報の提供方法をユーザにとってより分かりやすく・正しく表現できるように工夫してみましょう。
箇条書きリストの作成
<p>主要な視覚ブラウザには次のようなものがある。</p>
<ul>
<li>Microsoft Internet Explorer</li>
<li>Google Chrome</li>
<li>Mozilla Firefox</li>
<li>Safari</li>
<li>Opera</li>
</ul>ul要素（Unordered List）は項目を並列的に列挙する箇条書きリストを定義するブロックレベル要素です。li要素（List Item）は ul要素の中で使用し、リスト表示させる各項目を指定します。なお、HTML4 では li要素の終了タグ（</li> 部分）を省略可能です。視覚ブラウザではリストの前後は1行空きで表示されます。余白は、CSS の marginプロパティで調節できます。
リストのマーク変更
<ul>
<li type="disc">黒丸</li>
<li type="circle">円の丸</li>
<li type="square">黒の四角</li>
</ul>type属性は ul要素, li要素のいずれにも加えることができ、リストの文頭につくマーク（マーカーと呼ぶ）の種類を指定できる属性です。ul要素に対して type属性を指定した場合、そのリスト全体のマーカーを指定したマークで表示します。li要素に対して、指定した場合は、その項目（List Item）のみを指定したマークで表示します。
ul要素、または ul要素の子要素である li要素に指定できる type属性の値には次の3つのキーワードがあります。
- disc
- 黒丸
- circle
- 円の丸
- square
- 黒の四角
なお、type属性は非推奨属性のため、マーカーの種類は CSS の list-style-typeプロパティで指定することが推奨されています。
番号順リストの作成
<h1>モーセの十戒</h1>
<ol>
<li>ヤハウェが唯一の神であること</li>
<li>偶像を作ってはならないこと</li>
<li>神の名を徒らに取り上げてはならないこと</li>
<li>...</li>
<li>隣人の家をむさぼってはいけないこと</li>
</ol>ol要素（Order List）は序列・順番を示す番号付きリストを定義するブロックレベル要素です。指定方法は ul要素と同じで、リスト全体を "<ol>" と "</ol>" で囲み、その間に li要素をつけてリスト項目の文章を定義します。視覚ブラウザでは、リスト項目の文頭には、上から順に "1." "2." "3." と番号がふられます。li要素の追加や削除を行っても、順番は自動でふってくれるので、番号のふり間違いをすることはありません。
番号順リストの数値タイプの変更
<h1>健康の秘訣十カ条</h1>
<ol>
<li type="A">バランスの取れた栄養をとる</li>
<li type="a">お酒はほどほどに</li>
<li type="I">たばこは吸わないように</li>
<li type="i">適度にスポーツをする...</li>
</ol>type属性は ol要素, li要素のいずれにも加えることができ、 リストの文頭につくマーク（マーカー）の種類を指定できる属性です。ol要素に対して type属性を指定した場合、リスト全体のマーカーの数値タイプを指定できます。li要素に対して指定した場合は、その項目（List Item）のみの数値タイプを指定することができます。
ol要素、または ol要素の子要素である li要素に指定できる type属性の値には次の5つのキーワードがあります。
- a
- a, b, c, d, ...
- A
- A, B, C, D, ...
- i
- i, ii, iii, iv, ...
- I
- I, II, III, IV, ...
- 1
- 1, 2, 3, 4, ...
なお、type属性は非推奨属性のため、マーカーの種類は CSS の list-style-typeプロパティで指定することが推奨されています。
番号順リストの開始数値の変更
<ol start="100">
<li>マーカーの番号が100から開始される</li>
<li>この項目は101と表示される</li>
</ol>
<ol>
<li>この項目は1と表示されている</li>
<li>この項目は2と表示されている</li>
<li value="20">いきなり数字が飛び、この項目は20と表示されている</li>
<li>value属性が個別になければ次の項目に継承され、この項目は21と表示されている</li>
</ol>ol要素の start属性はリスト全体の開始番号を指定する属性で value属性は個別のリスト項目の開始番号を指定する属性です。個別に value属性が指定されていない場合には、指定のあった項目から以降の項目に継承されます。たとえば、サンプルのように3行目で "value="20"" を指定し、続く4行目に指定がない場合は、自動的に4行目は "21" の番号がふられ、それ以降の項目も "22, 23" と続きます。
*start属性, value属性は非推奨属性です。しかしながら、CSS では ol要素のstart属性, li要素のvalue属性の代替となるプロパティが用意されていません。代替方法がないため、この場合は必要に応じて使用することになるでしょう。なお、HTML4.01の後継規格であるHTML5では、start属性, value属性は非推奨属性ではなく仕様として認められているため、今後廃止になることもありません。
定義型（説明付き）リストの作成
<dl>
<dt>見出し（用語）</dt>
<dd>内容（説明）</dd>
</dl>dl要素（Definition List）は定義型リスト（説明付きリストとも呼ばれる）を定義するブロックレベル要素です。定義型リストとは用語とその用語の説明（定義）を一組にしてリスト表示するものです。dt要素（Definition Term）が用語にあたる部分を定義し、dd要素（Definition Discription）にその内容の説明を定義します。定義型リストは用語とその説明をする使い方以外にも、リンク先とその説明、日付と更新情報など様々な用途に応用できます。
HTML4 では dt要素, dd要素の終了タグ（"</dt>" と "</dd>" の部分）は、それぞれ省略することが可能です。視覚ブラウザでは dd要素の部分は左側にインデントした表示になります。インデント部分は、CSS の marginプロパティで調節できます。