li 要素

4.4.7 li 要素

カテゴリー:
なし
この要素を使うことができるコンテキスト:
ol 要素の中
ul 要素の中
コンテントモデル:
フロー・コンテント
コンテント属性:
グローバル属性
この要素が ol 要素の子なら: value - リスト項目の序数値
text/html におけるタグの省略:

li 要素の直後に別の li 要素が来るなら、または、親要素に他のコンテンツがないなら、li 要素の終了タグは省略することができます。

指定可能な ARIA role 属性 の値:
listitem ロール (デフォルト - 指定不要), menuitem, menuitemcheckbox, menuitemradio, option, tab, treeitem, presentation
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
interface HTMLLIElement : HTMLElement {
           attribute long value;
};

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

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

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

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

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

value IDL 属性は、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 属性を使って、次のようにもマークアップを書くことができます:

<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>

li 要素の中に見出し要素(たとえば h1)を入れても仕様に適合しているのですが、ウェブ制作者が意図したセマンティクスを伝えない可能性があります。見出しは新たなセクションを開始してしまいますから、リストの中の見出しは、そのリストをいくつかのセクションに分離してしまうことになってしまいます。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-li-element