<ul>: 順序なしリスト要素

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.

<ul>HTML の要素で、項目の順序なしリストを表します。一般的に、行頭記号を伴うリストとして描画されます。

試してみましょう

属性

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

compact 非推奨;

この論理属性は、コンパクトなスタイルでリストを描画するようブラウザーに指示するものです。この属性の解釈はユーザーエージェントに委ねられ、またすべてのブラウザーで動作するものでもありません。

警告: この属性は非推奨になっているため、使用しないでください。代わりに CSS を使用してください。 compact 属性と同様の効果を得るには、 CSS の line-height プロパティを用い、その値として 80% を指定します。

type 非推奨;

リストの行頭記号の形状を指定するために用います。 HTML3.2 および HTML 4.0/4.01 tranditional で定義されていた値は以下の通りです。

  • circle
  • disc
  • square

4 つ目の行頭記号の形状として、WebTV インターフェイスで triangle が定義されていますが、すべてのブラウザーが対応しているわけではありません。

この属性が存在せず、CSSlist-style-type プロパティがその要素に適用されていない場合は、ユーザーエージェントが行頭記号の種類を、リストの入れ子階層に応じて選択します。

警告: この属性は非推奨なので使用しないでください。代替として CSSlist-style-type プロパティを使用してください。

使用上のメモ

  • <ul> 要素は、数的な順序がなく、その配置順に意味を持たない項目を持つリストを表します。通常、順序なしリストの項目はドット、円形、四角形などいくつかの形式による行頭記号を伴って描画されます。行頭記号のスタイルは HTML 仕様書のページでは定義されていませんが、 CSS の list-style-type プロパティを用いて変更することが可能です。
  • <ul> 要素と <ol> 要素は、必要なだけ深く入れ子にすることができます。さらに言えば、入れ子になったリストが <ol><ul> の間で変化することに制限はありません。
  • <ol><ul> は、どちらも項目のリストを表します。両者の違いは、 <ol> 要素では順序に意味があることです。使い分けの目安としては、項目の順序を変更してみてください。意味が変わるようであれば <ol> 要素を使用し、そうでない場合は <ul> 要素を使用することができます。

シンプルな例

html
<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

次のように出力されます。

入れ子になったリスト

html
<ul>
  <li>first item</li>
  <li>
    second item
    <!-- 閉じタグの </li> がここにはない -->
    <ul>
      <li>second item first subitem</li>
      <li>
        second item second subitem
        <!-- 入れ子になった第二の順序なしリストでも同じ -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li>
      <!-- 三番目の順序なしリストを含む li の
                  閉じタグ </li> -->
      <li>second item third subitem</li>
    </ul>
    <!-- ここに閉じタグ </li> -->
  </li>
  <li>third item</li>
</ul>

次のように出力されます。

<ul> と <ol> のネスト

html
<ul>
  <li>first item</li>
  <li>
    second item
    <!-- ここには <li> の閉じタグはない -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
    <!-- ここに </li> を記述し、要素を閉じている -->
  </li>
  <li>third item</li>
</ul>

次のように出力されます。

技術的概要

コンテンツカテゴリー フローコンテンツ。また、 <ul> 要素の子に少なくとも 1 個 <li> 要素を包含する場合は、知覚可能コンテンツ
許可されている内容 0個以上の <li>, <script>, <template> 要素。
タグの省略 なし。開始タグと終了タグの両方が必須です。
許可されている親要素 フローコンテンツを受け入れるすべての要素
暗黙の ARIA ロール list
許可されている ARIA ロール directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM インターフェイス HTMLUListElement

仕様書

Specification
HTML
# the-ul-element

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ul
compact
Deprecated
type
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.

関連情報

  • その他のリスト関連要素: <ol>, <li>, <menu>

  • <ul> 要素の整形に有益な CSS プロパティ:

    • list-style プロパティ: 行頭記号の表示方法の変更
    • CSS カウンター: 複雑に入れ子になったリストの扱い
    • line-height プロパティ: 非推奨の compact 属性のシミュレート
    • margin プロパティ: リストのインデントの制御