<ul>: The Unordered List element #

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

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <ul> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-standard .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

• Milk
• Cheese
  • Blue cheese
  • Feta

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} li { list-style-type: circle; }

li li {
  list-style-type: square;
}

::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Attributes #

::: section-content This element includes the global attributes.

compact [Deprecated]{.visually-hidden} [Non-standard]{.visually-hidden}

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.

::: {#sect1 .notecard .warning} 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 [Deprecated]{.visually-hidden} [Non-standard]{.visually-hidden}

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.

::: {#sect2 .notecard .warning} Warning: Do not use this attribute, as it has been deprecated; use the CSS list-style-type property instead. ::: :::

Usage notes #

::: section-content

• 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. 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 #

::: section-content ::: code-example [html]{.language-name}

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

:::

Result #

::: {#sect3 .code-example} ::: iframe ::: ::: :::

Nesting a list #

::: section-content ::: code-example [html]{.language-name}

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

:::

Result #

::: {#sect4 .code-example} ::: iframe ::: ::: :::

Ordered list inside unordered list #

::: section-content ::: code-example [html]{.language-name}

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

:::

Result #

::: {#sect5 .code-example} ::: iframe ::: ::: :::

Technical summary #

::: section-content

Specifications #

::: _table #

Specification #

HTML Standard
[# the-ul-element]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

          Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

ul 1 12 1 Yes 15 ≤4 4.4 18 4 14 ≤3.2 1.0 compact 1 12 1 Yes 15 3 4.4 18 4 14 2 1.0 type 1 12 1 Yes 15 ≤4 4.4 18 4 14 ≤3.2 1.0 :::

See also #

::: section-content

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

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul{._attribution-link} :::