HTML-リストタグについて

リストタグとは

リストタグとは、文章を読みやすくするために「箇条書き」を作るHTMLのタグのことです。

無順序リスト(ulタグ)

ul は Unordered Listの略です。
HTML4以前はマーク種別(type)により表記を変更できましたが、HTML5 では type 属性は廃止されています。
(基本的にはスタイルシートで代用する方針になったようです。とはいえ、ブラウザによっては機能しているようです。)


<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>

<ul type="circle">
  <li>circle付きの項目1</li>
  <li>circle付きの項目2</li>
</ul>

順序付きリスト(olタグ)

ol は Ordered Listの略で、連番付きのリストを表示できます。
属性として、type、start、reversedなどが指定できます。(HTML5から一部は非推奨など設定されています。)


<ol>
  <li>項目1</li>
  <li>項目2</li>
</ol>

<ol type=I start=3>
  <li>type=Iはローマ数字で表示されます。</li>
  <li>startを3にすると3から列挙されます。</li>
</ol>

リスト項目(liタグ)

li は List Item の略です。ol や ul などと一緒に用いてリストを表示します。
li要素内には、divやpなどのブロックレベル要素も含めてすべての要素を指定する事が可能です。


<ol>
  <li>項目1<br />li内で改行できます。</li>
  <li>項目2</li>
</ol>

用語説明グループ:dl dt dd要素

dl要素は用語説明グループ(term-description groups)のリストを表す要素です。(Definition List(定義リスト)の略です。)
子要素に使用できる要素はdtもしくはdd要素のみです。

dt要素は、Definition Term(定義語)の略で、用語説明グループ(dl要素)リスト内の用語を表す要素です。
dd要素は、Definition Description(定義の説明)の略で、用語説明グループ(dl要素)リスト内の説明を表す要素です。


<dl>
  <dt>dlとは?</dt>
  <dd>dl(definition list)は、用語説明グループのリストを表示するタグです。</dd>
  <dt>dtとは?</dt>
  <dd>dt(definition term)は、説明したい用語や名前に用います。</dd>
  <dt>ddとは?</dt>
  <dd>dd(definition description)は、上記dtの説明をするタグになります。</dd>
</dl>

リストタグの入れ子・複合について

リストの項目の入れ子の最大数は?

リストは入れ子にして表示することが可能です。
このネストの階層数に関する仕様は見当たらず、とくに制限は無いようです。
メジャーブラウザでは、10~20階層程度ならば正常に描写できる様子です。


<ul>
  <li>親項目1
    <ul>
      <li>子項目1</li>
      <li>子項目2</li>
    </ul>
  </li>
  <li>親項目2</li>
</ul>



リストの項目にli以外を定義できるか?

W3Cによる仕様定義では、「入れ子に指定できる要素はli要素のみ」とされています。
以下のようなリスト定義は仕様外なので、ブラウザによってはたまたま表示できるかもしれませんが、推奨されていません。

<ul>
<span><li>項目1</li></span>
<br /><li>項目2</li>
<p>項目2の補足</p>
</ul>


関連ページ