<li>: リスト項目要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<li>HTML の要素で、リストの項目を表すために用いられます。この要素は、その項目が属する順序付きリスト (<ol>)、順序なしリスト (<ul>)、メニュー (<menu>) のいずれかの子要素として配置する必要があります。メニュー要素および順序なしリスト内においては、リストの項目は通常、行頭文字を伴って表示されます。順序付きリスト内では、数字や文字による連番のリストマーカーを伴って表示されます。

試してみましょう

属性

この要素にはグローバル属性があります。

value

これは整数値の属性で、<ol> 要素で定義されたリスト項目の序数値を示します。リストがローマ数字や文字で表示される場合であっても、この属性は数値のみが指定できます。続くリスト項目は、その番号から続いて採番されます。順序なしリスト (<ul>) やメニュー (<menu>) では value 属性は意味がありません。

type 非推奨 Non-standard

文字の属性で、表示するリストマーカーの種類を指定します。

  • a: 小文字
  • A: 大文字
  • i: 小文字のローマ数字
  • I: 大文字のローマ数字
  • 1: 数字

もし親の <ol> 要素で使用されていた場合は、それよりも優先されます。

メモ: この属性は非推奨になっています。代わりに CSS の list-style-type プロパティを使用してください。

もっと詳細な例は、 <ol><ul> のページを参照してください。

番号付きリスト

html
<ol>
  <li>最初のリスト項目</li>
  <li>二番目のリスト項目</li>
  <li>三番目のリスト項目</li>
</ol>

結果

カスタム値の付いた番号付きリスト

html
<ol type="I">
  <li value="3">third item</li>
  <li>fourth item</li>
  <li>fifth item</li>
</ol>

結果

順序なしリスト

html
<ul>
  <li>最初のリスト項目</li>
  <li>二番目のリスト項目</li>
  <li>三番目のリスト項目</li>
</ul>

結果

技術的概要

コンテンツカテゴリー なし
許可されている内容 フローコンテンツ
タグの省略 直後に別の <li> 要素が続く場合、または他のリスト項目が続くことなく親要素が閉じられた場合は、終了タグが省略可能。
許可されている親要素 <ul><ol><menu>。すでに廃止されているが、<dir> の子要素としても配置可能であった。
暗黙の ARIA ロール listitem when child of an ol, ul or menu
許可されている ARIA ロール menuitem, menuitemcheckbox, menuitemradio, option, none, presentation, radio, separator, tab, treeitem
DOM インターフェイス HTMLLIElement

仕様書

Specification
HTML Standard
# the-li-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • 他のリスト関連 HTML 要素: <ul>, <ol>, <menu> および廃止された <dir>

  • <li> の整形に便利な CSS プロパティ:

    • 箇条書き記号の表示を選択するための list-style
    • 複雑な入れ子状リストを処理するのに使用できる CSS counters
    • リスト項目のインデントの調整に用いることができる margin