<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

此布林屬性提示應以緊湊樣式呈現清單。此屬性的解釋取決於user agent，並且並非所有瀏覽器都支援。

警告： 請勿使用此屬性，因為它已被棄用：請改用 CSS。要達到與 compact 屬性類似的效果，可以使用具有值 80% 的 CSS 屬性line-height。

type

此屬性設置清單的項目符號樣式。在HTML3.2和HTML 4.0/4.01的過渡版本中定義的值有：

  • circle
  • disc
  • square

WebTV界面中定義了第四種項目符號類型，但並非所有瀏覽器都支援：triangle。

如果未出現，且如果元素未應用 CSS list-style-type 屬性，則使用者代理程式將根據清單的巢狀層級選擇項目符號類型。

警告： 請勿使用此屬性，因為它已被棄用；請改用 CSS list-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
    <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>
        second item second subitem
        <!-- Same for the second nested unordered list! -->
        <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>
      <!-- Closing </li> tag for the li that
                  contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

結果

無序清單內的有序清單

html
<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

結果

技術摘要

內容類別 流內容，如果 <ul> 元素的子元素包含至少一個 <li> 元素，則包括 捫及內容。
允許的內容 零個或多個 <li>、 <script> 和 <template> 元素。
標籤省略 不允許，開始標籤和結束標籤均為必需。
允許的父元素 任何接受流內容的元素。
隱含的 ARIA 角色 list
允許的 ARIA 角色 directory、group、listbox、menu、menubar、none、presentation、radiogroup、tablist、toolbar、tree
DOM 介面 HTMLUListElement

規範

Specification
HTML Standard
# the-ul-element

瀏覽器相容性

BCD tables only load in the browser

參見

  • 其他與清單相關的HTML元素：<ol>、<li>、<menu>

  • 可能對樣式化 <ul> 元素特別有用的 CSS 屬性：