箇条書きを書きたい場合など、下記の節のようにリスト(List)を定義しますHTML5には List という分類はなくHTML4まで List とされた要素は、P要素やMAIN要素などとともに [https://html.spec.whatwg.org/multipage/grouping-content.html#grouping-content §4.4 Grouping content]に分類されました。。
リストには「順不同リスト」「序列リスト」と「定義リスト」があります。
このうち「順不同リスト」と「序列リスト」のマークアップは共通していますが「定義リスト」のマークアップは2つとは異なります。
「順不同リスト」と「序列リスト」では
<リスト要素>
  ごはん
  味噌汁
  焼き魚
のように、内部をLI要素を用いて各要素を指定し外側のリスト要素(UL要素など)で表示方法を指定します。
なお、内部のLI要素の冒頭の「l」は、小文字のLですので注意してください先頭が数字で始まる要素はありません。。
内部のLI要素によって記述された部分は、ウェブブラウザのユーザーエージェント・スタイルシートでは行頭にインデントがとられ各項目は強制的に改行されます。
また、行頭には黒丸や数字が表示されるものもありますがウェブブラウザの種類やウェブページ側の設定によって黒丸や数字以外のものが表示される場合もあります。
UL要素はアイテムのリストを表しますが、アイテムの順序は重要ではありません。
UL要素の内容にはLI要素しか許されません。
ごはん
味噌汁
焼き魚
ごはん
味噌汁
焼き魚
リストの中にリストを入れることもできます。
この際、内側のリストはインデントされる事に注意してください。
ごはん
味噌汁
赤味噌
白味噌
焼き魚
表示結果の例
ごはん
味噌汁
赤味噌
白味噌
焼き魚
普通の実効環境では、インデントが適用されるのはリスト項目だけでなく、内側のulタグで囲まれた部分全体になります。
たとえば、
ソース例
ごはん
味噌汁
赤味噌ああああああああああああああ
白味噌
焼き魚
とすると、
実行結果
ごはん
味噌汁
赤味噌ああああああああああああああ
白味噌
焼き魚
リスト中でリスト項目外にテキストを書いても、特に追加のインデントなどは無いので、項目の備考などを書きたい場合には、そのままでは不便です。
そこで、下記のように div タグによるスタイル指定などを用いて、インデントが出来ます。（リストに限らず、一般的にHTMLでインデントをする場合の手法です。）
ソース例
ごはん
味噌汁
赤味噌大豆が多め
白味噌米が多め
焼き魚
実行結果
ごはん
味噌汁
赤味噌大豆が多め
白味噌米が多め
焼き魚
CSSのlist-style-typeプロパティをUL要素に適用すると、リスト全体のリストマークの種類を変更することが出来ます。
CSSのlist-style-typeプロパティをUL要素の子要素のLI要素に適用すると、個々のリスト要素のリストマークの種類を変更することが出来ます。
リストマークのデザインや使えるリストマークの種類はウェブブラウザによって異なる場合があります。
list-style-type: disc
list-style-type: circle
list-style-type: square
OL要素は、アイテムのリストを表し、アイテムが意図的に順序付けられており順序を変更するとドキュメントの意味が変わるようなケースに用いられます。
一般的なウェブブラウザでは1, 2, 3, ... や A, B, C, ... とレンダリングされる事が多く、個々の項目はUL要素の時と同様LI要素を用います。
○○駅で電車に乗る
××駅で乗り換える
△△駅で降りる
○○駅で電車に乗る
××駅で乗り換える
△△駅で降りる
CSSのlist-style-typeプロパティをOL要素に適用するとリスト全体の列挙表現を変更することが出来ます。
CSSのlist-style-typeプロパティをOL要素の子要素のLI要素に適用すると、個々のリスト要素の列挙表現を変更することが出来ます。
列挙表現のデザインや使える列挙表現はウェブブラウザによって異なる場合があります。
list-style-type: decimal
list-style-type: lower-latin
list-style-type: upper-latin
list-style-type: lower-roman
list-style-type: upper-roman
list-style-type: lower-greek
list-style-type: upper-greek
list-style-type: cjk-decimal
list-style-type: katakana-iroha
list-style-type: cjk-earthly-branch
list-style-type: cjk-heavenly-stem
list-style-type: thai
OL要素にvalue属性を指定すると開始番号を変更可能である。例えばvalue属性に5を指定するとLI要素には上から順番に5, 6, 7, ...という番号が振られる。また、個別のli属性にstart属性を変更することでリストの途中から開始番号を変更することが出来る。例えばリスト中の3番目にあるリストに9というvalue属性値を付与した場合、そのリストは三番目の項目から9, 10, 11, ...という番号が振られるようになる。
○○駅で電車に乗る
××駅で乗り換える
△△駅で降りる
○○駅で電車に乗る
××駅で乗り換える
△△駅で降りる
用語の定義のような名前と説明が対になったリストにはDL要素を用います。
DT要素は、UL要素やOL要素と違い、LI要素ではなくDT要素とDD要素とDIV要素から構成されます。
DT要素は定義される用語（名前）を示し、DD要素は用語の説明を示します。
DT要素にはDT要素とDD要素とDIV要素HTML5ではDL要素の直下の子要素にDIV要素が許されるようになりました。のみを含むことが出来ます。
DT要素はインライン要素を含むことができます。
DD要素はブロックレベル要素を含むことが出来ます。
次の例は、ウィキブックスの姉妹プロジェクトを説明しています。
メタウィキ
全プロジェクトの補助的プロジェクトです。
ウィキペディア
百科事典を作成するプロジェクトです。
ウィクショナリー
辞書・シソーラス作成プロジェクトです。
メタウィキ
全プロジェクトの補助的プロジェクトです。
ウィキペディア
百科事典を作成するプロジェクトです。
ウィクショナリー
辞書・シソーラス作成プロジェクトです。