HTML Living Standard  第1部 HTML 8 リスト


 

8 リスト

基本的には本文は見出しと段落だけで構成できるはずです。しかし、一連の並列される情報や、順序立ててステップを説明するような内容は、リストとして表現する方が分かりやすいことがあります。

適当にリストを交えてメリハリをつけるのも、読みやすく理解しやすい文章を書く上では大切な工夫です。情報の種類に応じて、次の3つのリストを使い分けてください。

8.1 並列列挙リスト (ul)

ul 要素は、項目の順序があまり大きな意味を持たず、並列的に列挙する際に使用します。それぞれの項目は li 要素で示します。

ul 要素

順序のないリストを表示する。

ul 要素は、0個以上の li 要素を持つ。つまり、li 要素以外を直接の子要素とすることはできないので、ul 要素を入れ子にする場合でも、ul 要素の直下に別の ul 要素を置くことはできない。必ず、li 要素の子要素として使用する必要がある。

リストの先頭記号(リストマーカー)は、スタイルシートの list-style-type プロパティで指定する。

属性

なし

li 要素

リストの項目を表す。ul 要素と ol 要素の中にのみ指定できる。

記述例
  <ul>
    <li>リスト項目A</li>
    <li>リスト項目B</li>
    <li>リスト項目C</li>
  </ul>

表示例

リストに階層を持たせたい場合は、次のように li 要素の中に別の ul 要素などを配置します。

このとき、リストの先頭記号(リストマーカー)は、 黒丸(disc)・白丸(circle)・黒い四角(square)の順に表示されます。

記述例
  <ul>
    <li>リスト項目A</li>
    <li>リスト項目B
      <ul>
        <li>リスト項目B-1</li>
        <li>リスト項目B-2</li>
      </ul>
    </li>
    <li>リスト項目C</li>
  </ul>

表示例

8.2 序列リスト (ol)

ol 要素は、順序のあるリストを表示する際に使用します。それぞれの項目は li 要素で示します。

ol 要素

意図的に順序づけされたリストを表示する。

ol 要素は、0個以上の li 要素を持つ。つまり、li 要素以外を直接の子要素とすることはできないので、ol 要素を入れ子にする場合でも、ol 要素の直下に別の ol 要素を置くことはできない。必ず、li 要素の子要素として使用する必要がある。

属性

属性名属性値説明必須
type1算用数字(規定値)×
a小文字、半角アルファベット(z の次は aa になる)
A大文字、半角アルファベット(Z の次は AA になる)
i小文字、ローマ数字
I大文字、ローマ数字
start半角の算用数字一番最初の項目に付ける番号(規定値:1)×
reversed論理値降順にするかどうか(type="1" のときのみ有効)(規定値:false)×

li 要素

リストの項目を表す。ul 要素と ol 要素の中にのみ指定できる。

属性

属性名属性値説明必須
value整数指定されている li 要素以降がこの数字からの連番になる
ただし、ol 要素の子要素のときのみ指定できる
×
記述例
  <ol>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li value="8">リスト項目3</li>
    <li>リスト項目4</li>
  </ol>

表示例

リストの先頭の数字(リストマーカー)をアルファベットやローマ数字に変更することもできます。

記述例
  <ol type="a">
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li value="8">リスト項目3</li>
    <li>リスト項目4</li>
  </ol>

表示例


また、開始番号を変更することもできます。

記述例
  <ol start="9">
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li value="8">リスト項目3</li>
    <li>リスト項目4</li>
  </ol>

表示例


type="1" のときは数字を降順することもできます。このとき、0 にも負数にもなります。

記述例
  <ol reversed>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
    <li value="8">リスト項目5</li>
    <li>リスト項目6</li>
  </ol>

表示例

8.3 記述リスト (dl)

dl 要素は、定義・説明リストを表す際に使用します。 <dl>~</dl>の中に、 <dt>タグで定義・説明される言葉を、 <dd>タグでそれに対応する説明を配置してリストを作成します。

<dt>と<dd>は、必ずしも一対一である必要はありません。 一つの定義(dt)に対して複数の説明(dd)をしたり、 複数の定義(dt)に対して一つの説明(dd)をすることもできます。

例えば、用語の定義リストを作成したり、何かの手順を箇条書きで説明する場合などに使用します。

dl 要素

dl 要素は、用語(1 個以上の dt 要素)と説明(dt 要素に続いて 0 個以上の dd 要素)を組み合わせたリストを表す。

例えば、用語の定義リストを作成したり、何かの手順を箇条書きで説明する場合などに使用する。

属性

なし

dt 要素

dt 要素は、dl 要素内で用語を指定する。これに続いて 0 個以上の dd 要素を記述する。

用語を定義語として表したい場合には、dt 要素として dfn 要素を使用する。

属性

なし

dd 要素

dd 要素は、dl 要素内で説明を指定する。dt 要素に続いて 0 個以上記述する。

説明が複数の段落にわたる場合でも、同一の dd 要素内に記述する必要がある。段落を分ける目的で異なる dd 要素内に記述すべきではない。

属性

なし


dt 要素が太字になるかどうか、dd 要素がインデントされるかどうかはブラウザによります。

記述例
  <dl>
    <dt>用語1</dt>
      <dd>用語1の説明1</dd>
      <dd>用語1の説明2</dd>
    <dt>用語2</dt>
    <dt>用語3</dt>
      <dd>用語2と用語3の説明</dd>
  </dl>

表示例