li 要素

4.5.7 li 要素

カテゴリー
なし
この要素を使うことができるコンテキスト：
ol 要素の中
ul 要素の中
menu 要素の中
コンテンツ・モデル：
フロー・コンテンツ
コンテンツ属性：
グローバル属性
ol 要素の子の場合：value
DOMインタフェース：
interface HTMLLIElement : HTMLElement {
           attribute long value;
};

li 要素はリストの項目を表します。この要素は、もし親要素が ol, ul, menu 要素なら、その親要素に定義されるリストの項目となります。そうでなければ、そのリスト項目は、他の li 要素とリストに関する結び付きをまったく持ちません。

親要素が ol 要素なら、その li 要素は序数値を持ちます。

value 属性は、もし存在すれば、リスト項目の序数値を与える妥当な整数でなければいけません。

value 属性が存在するなら、ユーザーエージェントは、属性値を決定するために、それを整数としてパースしなければいけません。属性値が数値に変換できなかった場合は、この属性はなかったものとして扱わなければいけません。この属性はデフォルト値を持ちません。

value 属性は、親要素に ol 要素があれば、それに結びづけられて処理されます。もしなければ、この属性は何も効果を持ちません。

value IDL 属性は、value コンテンツ属性の値を反映しなければいけません。

次の例では、映画のトップ10がリストアップされています（逆順）。このリストが、figure 要素と、その figcaption 要素を使うことで、どうやってタイトルを表すかに注目してください。

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol>
  <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
  <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li value="8"><cite>A Bug's Life</cite>, 1998</li>
  <li value="7"><cite>Toy Story</cite>, 1995</li>
  <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
  <li value="5"><cite>Cars</cite>, 2006</li>
  <li value="4"><cite>Toy Story 2</cite>, 1999</li>
  <li value="3"><cite>Finding Nemo</cite>, 2003</li>
  <li value="2"><cite>The Incredibles</cite>, 2004</li>
  <li value="1"><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

ol 要素の reversed 属性を使って、次のようにもマークアップを書くことができます：

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol reversed>
  <li><cite>Josie and the Pussycats</cite>, 2001</li>
  <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li><cite>A Bug's Life</cite>, 1998</li>
  <li><cite>Toy Story</cite>, 1995</li>
  <li><cite>Monsters, Inc</cite>, 2001</li>
  <li><cite>Cars</cite>, 2006</li>
  <li><cite>Toy Story 2</cite>, 1999</li>
  <li><cite>Finding Nemo</cite>, 2003</li>
  <li><cite>The Incredibles</cite>, 2004</li>
  <li><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

li 要素が menu 要素の子要素で、それ自身がコマンドを定義する子を持っているなら、最初の子要素と同様に、li 要素は、:enabled と :disabled 疑似クラスに一致するでしょう。

※ 原文：http://www.w3.org/TR/2011/WD-html5-20110525/grouping-content.html#the-li-element