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

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

属性

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

compact
この論理属性はコンパクトなスタイルでリストをレンダリングするようブラウザに指示するものです。この属性の解釈はユーザーエージェントに委ねられ、またすべてのブラウザーで動作するものでもありません。
使用上の注意: この属性は非推奨になっているため、使用しないでください。<ul> 要素の整形には CSS を用いてください。compact 属性を指定した場合と同様の視覚効果を得るには、 CSSline-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 プロパティを用いて変更することが可能です。
  • <ol> 要素と <ul> 要素で定義されたリストの入れ子の階層の深さや交互に配置することの制限はありません。
  • <ol><ul> は、どちらも項目のリストを表します。両者の違いは、 <ol> 要素では順序に意味があることです。使い分けの目安としては、項目の順序を変更してみてください。意味が変わるようであれば <ol> 要素を使用するべきであり、そうでなければ <ul> を使うことができます。

シンプルな例

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

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

  • first item
  • second item
  • third item

入れ子になったリスト

<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>
  <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

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

  • first item
  • second item
    • second item first subitem
    • second item second subitem
      • second item second subitem first sub-subitem
      • second item second subitem second sub-subitem
      • second item second subitem third sub-subitem
    • second item third subitem
  • third item

<ul> と <ol> のネスト

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

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

  • first item
  • second item
    1. second item first subitem
    2. second item second subitem
    3. second item third subitem
  • third item

仕様書

仕様書 状態 備考
HTML Living Standard
<ul> の定義
現行の標準  
HTML5
<ul> の定義
勧告  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
compact
非推奨非標準
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
type
非推奨非標準
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。

関連情報

  • その他のリスト関連要素: <ol>, <li>, <menu>, <dir>
  • <ul> 要素の整形に便利な CSS プロパティ:
    • list-style プロパティは、行頭記号の表示方法の変更に使用可能です。
    • CSS カウンターは、複雑に入れ子になったリストを扱うのに便利です。
    • line-height プロパティは、非推奨の compact 属性をシミュレートするのに便利です。
    • margin プロパティは、リストのインデントの制御に便利です。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, sys9kdr, ethertank
最終更新者: mfuji09,