リスト要素（li、ul、ol、dl、dt、dd）の仕様と使い方

カテゴリ：HTML編

li要素

li要素はリストの本体を指定する要素です。
ulやolの子要素（入れ子）として使用します。
li要素単体では使用できません。
li要素内には、divやpなどのブロックレベル要素も含めてすべての要素を指定する事が可能です。

W3Cによるli要素の説明

li要素はリスト項目を表します。その親要素がolまたはulの場合、その要素は親要素のリストの項目であり、それらの要素に対して定義されています。それ以外の場合、リストアイテムには他のliエレメントとのリスト関連の関係は定義されていません。

ul要素

ul要素は連番のない（順番のない）リストを表します。
ul要素はリストの種類を示す要素（定義）であり、リスト項目自体は、以下のように子要素としてli要素で囲みます。

<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>

ul要素の注意点として、入れ子に指定できる要素はli要素のみです。
従って以下のような使い方は誤りです。
※パンくずリストなど、横並びのリストを作る際にこのようにしたくなりますが、仕様上はできません。

<ul>
<span><li>りんご</li></span>
<span><li>みかん</li></span>
<span><li>ぶどう</li></span>
</ul>

以下のように、li要素の中に使用する場合は問題ありません。

<ul>
<li><span>りんご</span></li>
<li><span>みかん</span></li>
<li><span>ぶどう</span></li>
</ul>

W3Cによるul要素の説明

ul要素はアイテムのリストを表します。アイテムの順序は重要ではありません。つまり、順序を変更してもドキュメントの意味が大きく変わることはありません。

ol要素

ol要素は連番付きのリストであることを表します。
つまり、li要素をolリストの入れ子にすることで連番付きのリストになります。
ul要素と同様にリストの種類を定義するための要素であり、入れ子にできる要素はli要素のみとなります。

<ol>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ol>

W3Cによるol要素の説明

ol要素は項目のリストを表し、項目が意図的に順序付けられているため、順序を変更すると文書の意味が変更されます。
リストの項目はol要素のli要素の子ノードであり、ツリー順になっています。

dl dt dd要素

dl要素は用語説明グループ（term-description groups）のリストを表す要素です。
実際のリストの項目には、以下のように子要素としてdtもしくはdd要素を使用します。
子要素に使用できる要素はdtもしくはdd要素のみです。
dt要素は、用語説明グループ（dl要素）リスト内の用語を表す要素です。
dd要素は、用語説明グループ（dl要素）リスト内の説明を表す要素です。

<dl>
<dt>ls</dt>
<dd>ファイルの一覧を表示します</dd>
<dt>cd</dt>
<dd>ディレクトリを移動します</dd>
<dt>mkdir</dt>
<dd>ディレクトリを作成します</dd>
</dl>

W3Cによるdl要素の説明

dl要素は、0個以上の用語説明グループの記述リストを表します。各用語の記述グループは、おそらくdiv要素の子の子としての1つ以上の用語（dt要素で表される）と、1つ以上の記述（おそらくdiv要素の子のdd要素で表される）から構成されます。
dt要素とdd要素の子要素以外のノードを無視し、dt要素とdd要素は単一のdl要素内のdiv要素子の子要素です。
用語説明グループは、名前と定義、質疑応答、カテゴリとトピック、または用語と記述のペアの他のグループとすることができます。

公開日時：2018年01月02日 11:30:54
最終更新日時：2022年03月12日 07:13:30