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

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

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

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

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

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

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

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

■属性

■使用例

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

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

■使用例

以下のサンプルは、li要素のvalue属性を使用して、映画トップ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>

■使用例

以下のサンプルは、ol要素のreversed属性を使用して、映画トップ10を逆順で紹介しています。 上記サンプルとマークアップは異なりますが、意味は同じです。

<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