<ul>: The Unordered List element

The HTML <ul> element represents an unordered list of items, typically rendered as a bulleted list.

Content categories Flow content, and if the <ul> element's children include at least one <li> element, palpable content.
Permitted content zero or more <li> elements, which in turn often contain nested <ol> or <ul> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Permitted ARIA roles directory, group, listbox, menu, menubar, radiogroup, tablist, toolbar, tree, presentation
DOM Interface HTMLUListElement

Attributes

This element includes the global attributes.

compact
This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent, and it doesn't work in all browsers.
Warning: Do not use this attribute, as it has been deprecated: use CSS instead. To give a similar effect as the compact attribute, the CSS property line-height can be used with a value of 80%.
type
This attribute sets the bullet style for the list. The values defined under HTML3.2 and the transitional version of HTML 4.0/4.01 are:
  • circle
  • disc
  • square

A fourth bullet type has been defined in the WebTV interface, but not all browsers support it: triangle.

If not present and if no CSS list-style-type property applies to the element, the user agent selects a bullet type depending on the nesting level of the list.

Warning: Do not use this attribute, as it has been deprecated; use the CSS list-style-type property instead.

Usage notes

  • The <ul> element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property.
  • The <ul> and <ol> elements may be nested as deeply as desired. Moreover, the nested lists may alternate between <ol> and <ul> without restriction.
  • The <ol> and <ul> elements both represent a list of items. They differ in that, with the <ol> element, the order is meaningful. As a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is changed, the <ol> element should be used, otherwise you can use <ul>.

Examples

Simple example

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

The above HTML will output:

Nesting a list

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

The above HTML will output:

Ordered list inside unordered list

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

The above HTML will output:

Specifications

Specification Status Comment
HTML Living Standard
The definition of '<ul>' in that specification.
Living Standard
HTML5
The definition of '<ul>' in that specification.
Recommendation

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ulChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
compact
DeprecatedNon-standard
Chrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
type
DeprecatedNon-standard
Chrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

See also

  • Other list-related HTML Elements: <ol>, <li>, <menu> and the obsolete <dir>;
  • CSS properties that may be specially useful to style the <ul> element:
    • the list-style property, useful to choose the way the ordinal is displayed,
    • CSS counters, useful to handle complex nested lists,
    • the line-height property, useful to simulate the deprecated compact attribute,
    • the margin property, useful to control the indent of the list.