<li> …… リスト項目を表す

<li>タグは、リスト項目を表す際に使用します。

li要素は、 ol要素、 ul要素、 menu要素 の子要素として配置した際に、これらの親要素のリスト項目となります。

終了タグ</li>の省略について

li要素の直後に別のli要素が続く場合、または、 li要素の直後に親要素のコンテンツが続いていない場合、li要素の終了タグ</li>を省略できます。

li要素内のh1-h6要素について

li要素内にh1-h6要素の見出しを配置することは、HTMLの文法としては誤りではありません。 ただし、見出し要素を配置すると、そこから暗黙的に新しいセクションが開始されるという点に注意してください。

リストの途中から新しいセクションが開始されるということは、 リストが暗黙的に複数のセクションに分割されるということです。 結果として、作者の意図しない文書構造になってしまう可能性があります。

■属性

■使用例

以下のサンプルは、ol要素の子要素のli要素にvalue属性を使用しています。

<ol>
 <li>リスト項目の１番目
 <li value="3">リスト項目の３番目
 <li>リスト項目の４番目
</ol>

■使用例

以下のサンプルは、映画トップ10を逆順で紹介しています。 figure要素と そのfigcaption要素でリストにタイトルを付けています。

<figure>
 <figcaption>史上最高の映画トップ10</figcaption>
 <ol>
  <li value="10"><cite>プッシーキャッツ</cite>, 2001</li>
  <li value="9"><cite lang="sh">Црна мачка, бели мачор（黒猫・白猫）</cite>, 1998</li>
  <li value="8"><cite>バグズ・ライフ</cite>, 1998</li>
  <li value="7"><cite>トイ・ストーリー</cite>, 1995</li>
  <li value="6"><cite>モンスターズ・インク</cite>, 2001</li>
  <li value="5"><cite>カーズ</cite>, 2006</li>
  <li value="4"><cite>トイ・ストーリー2</cite>, 1999</li>
  <li value="3"><cite>ファインディング・ニモ</cite>, 2003</li>
  <li value="2"><cite>Mr.インクレディブル</cite>, 2004</li>
  <li value="1"><cite>レミーのおいしいレストラン</cite>, 2007</li>
 </ol>
</figure>

■使用例

以下のサンプルは、逆順リストにするためにli要素のvalue属性の代わりにol要素のreversed属性を使用しています。 上記サンプルとマークアップは異なりますが、意味は同じです。

<figure>
 <figcaption>史上最高の映画トップ10</figcaption>
 <ol reversed>
  <li><cite>プッシーキャッツ</cite>, 2001</li>
  <li><cite lang="sh">Црна мачка, бели мачор（黒猫・白猫）</cite>, 1998</li>
  <li><cite>バグズ・ライフ</cite>, 1998</li>
  <li><cite>トイ・ストーリー</cite>, 1995</li>
  <li><cite>モンスターズ・インク</cite>, 2001</li>
  <li><cite>カーズ</cite>, 2006</li>
  <li><cite>トイ・ストーリー2</cite>, 1999</li>
  <li><cite>ファインディング・ニモ</cite>, 2003</li>
  <li><cite>Mr.インクレディブル</cite>, 2004</li>
  <li><cite>レミーのおいしいレストラン</cite>, 2007</li>
 </ol>
</figure>

Sponsors