<ul>

  • Revision slug: HTML/Element/ul
  • Revision title: <ul>
  • Revision id: 337879
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

Summary

The HTML unordered list element (<ul>) represents an unordered list of items, namely 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 squared. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the {{ cssxref("list-style-type") }} property.

There is no limitation to the depth and imbrication of lists defined with the {{ HTMLElement("ol") }} and {{ HTMLElement("ul") }} elements.

Usage note: The {{ HTMLElement("ol") }} and {{ HTMLElement("ul") }} elements both represent a list of items. They differ in that, with the {{ HTMLElement("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 {{ HTMLElement("ol") }} element should be used, otherwise you can use {{ HTMLElement("ul") }}.

Usage context

Content categories Flow content
Permitted content zero or more {{ HTMLElement("li") }} elements, eventually mixed with {{ HTMLElement("ol") }} and {{ HTMLElement("ul") }} elements.
Tag omission none, both the start tag and the end tag are mandatory
Permitted parent elements any element that accept flowing content
Normative document HTML5, section 4.5.6 (HTML4.01, section 10.2)

Attributes

Like all other HTML elements, this element supports the global attributes.

{{ htmlattrdef("compact") }}{{ Deprecated_inline() }}
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.
Usage note: Do not use this attribute, as it has been deprecated: the {{ HTMLElement("ul") }} element should be styled using CSS. To give a similar effect as the compact attribute, the CSS property line-height can be used with a value of 80%.
{{ htmlattrdef("type") }}{{ Deprecated_inline() }}
Used to set 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,
  • and 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 {{ cssxref("list-style-type") }} property does apply to the element, the user agent decide to use a kind of bullets depending on the nesting level of the list.

Usage note: Do not use this attribute, as it has been deprecated; use the CSS {{ cssxref("list-style-type") }} property instead.

DOM interface

This element implements the {{domxref("HTMLUListElement")}} interface.

Examples

Simple example

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

Above HTML will output:

  • first item
  • second item
  • third item

Nesting 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>third item first subitem</li>
    <li>third item second subitem</li>
    <li>third item third subitem</li>
     </ul>
     </li>           <!-- Closing </li> tag for the li that contains the third unordered list -->
     <li>second item third subitem</li>
   </ul>
    </li>                <!-- Here is the closing </li> tag -->
    <li>third item</li>
 </ul>

Above HTML will output:

  • first item
  • second item
    • second item first subitem
    • second item second subitem
      • third item first subitem
      • third item second subitem
      • third item third subitem
    • second item third subitem
  • third item

Nested <ul> and <ol>

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

Above HTML will output:

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

See also

  • Other list-related HTML Elements: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} and the obsolete {{ HTMLElement("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 {{ htmlattrxref("compact", "ul") }} attribute,
    • the margin property, useful to control the indent of the list.

{{ HTML:Element_Navigation() }}

{{ languages({ "en":"en/HTML/Element/ul", "de":"de/HTML/Element/ul", "ja":"ja/HTML/Element/ul", "pl":"pl/HTML/Element/ul"}) }}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The HTML <em>unordered list</em> element (<code>&lt;ul&gt;</code>) represents an unordered list of items, namely 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 squared. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the {{ cssxref("list-style-type") }} property.</p>
<p>There is no limitation to the depth and imbrication of lists defined with the {{ HTMLElement("ol") }} and {{ HTMLElement("ul") }} elements.</p>
<div class="note">
  <strong>Usage note: </strong> The {{ HTMLElement("ol") }} and {{ HTMLElement("ul") }} elements both represent a list of items. They differ in that, with the {{ HTMLElement("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 {{ HTMLElement("ol") }} element should be used, otherwise you can use {{ HTMLElement("ul") }}.</div>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Content categories</a></td>
      <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#Flow content">Flow content</a></td>
    </tr>
    <tr>
      <td>Permitted content</td>
      <td>zero or more {{ HTMLElement("li") }} elements, eventually mixed with {{ HTMLElement("ol") }} and {{ HTMLElement("ul") }} elements.</td>
    </tr>
    <tr>
      <td>Tag omission</td>
      <td>none, both the <span title="syntax-start-tag">start tag</span> and the <span title="syntax-end-tag">end tag</span> are mandatory</td>
    </tr>
    <tr>
      <td>Permitted parent elements</td>
      <td>any element that accept flowing content</td>
    </tr>
    <tr>
      <td>Normative document</td>
      <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-ul-element" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-ul-element">HTML5, section 4.5.6</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/lists.html#edef-UL" title="http://www.w3.org/TR/REC-html40/struct/lists.html#edef-UL">HTML4.01, section 10.2</a>)</td>
    </tr>
  </tbody>
</table>
<h2 id="Attributes">Attributes</h2>
<dl>
</dl>
<p>Like all other HTML&nbsp;elements, this element supports the <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>
<dl>
  <dt>
    {{ htmlattrdef("compact") }}{{ Deprecated_inline() }}</dt>
  <dd>
    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.
    <div class="note">
      <strong>Usage note:&nbsp;</strong>Do not use this attribute, as it has been deprecated: the {{ HTMLElement("ul") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect as the <span style="font-family: Courier New;">compact</span> attribute, the <a href="/en/CSS" title="en/CSS">CSS</a> property <a href="/en/CSS/line-height" title="en/CSS/line-height">line-height</a> can be used with a value of <span style="font-family: Courier New;">80%</span>.</div>
  </dd>
</dl>
<dl>
  <dt>
    {{ htmlattrdef("type") }}{{ Deprecated_inline() }}</dt>
  <dd>
    Used to set the bullet style for the list. The values defined under <a href="/en/HTML3.2" title="en/HTML3.2">HTML3.2</a> and the transitional version of <a href="/en/HTML4.01" title="en/HTML4.01">HTML 4.0/4.01</a> are<span style="font-family: monospace;">:</span>
    <ul>
      <li><code>circle</code>,</li>
      <li><code>disc</code>,</li>
      <li>and <code>square</code>.</li>
    </ul>
    <p>A fourth bullet type has been defined in the WebTV interface, but not all browsers support it: <code>triangle.</code></p>
    <p>If not present and if no <a href="/en/CSS" title="en/CSS">CSS</a> {{ cssxref("list-style-type") }} property does apply to the element, the user agent decide to use a kind of bullets depending on the nesting level of the list.</p>
    <div class="note">
      <strong>Usage note:</strong> Do not use this attribute, as it has been deprecated; use the <a href="/en/CSS" title="en/CSS">CSS</a> {{ cssxref("list-style-type") }} property instead.</div>
  </dd>
</dl>
<h2 id="DOM_interface">DOM interface</h2>
<p>This element implements the {{domxref("HTMLUListElement")}} interface.</p>
<h2 id="Examples">Examples</h2>
<h3 id="Simple_example">Simple example</h3>
<pre class="brush: html">
&lt;ul&gt;
  &lt;li&gt;first item&lt;/li&gt;
  &lt;li&gt;second item&lt;/li&gt;
  &lt;li&gt;third item&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>Above HTML will output:</p>
<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>
<h3 id="Nesting_list">Nesting list</h3>
<pre class="brush: html">
&lt;ul&gt;
&nbsp; &lt;li&gt;first item&lt;/li&gt;
&nbsp; &lt;li&gt;second item&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- Look, the closing &lt;/li&gt; tag is not placed here! --&gt;
&nbsp;&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;second item first subitem&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;second item second subitem &lt;!-- Same for the second nested unordered list! --&gt;
&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp; &lt;li&gt;third item first subitem&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &lt;li&gt;third item second subitem&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &lt;li&gt;third item third subitem&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;
&nbsp;&nbsp;&nbsp;&nbsp; &lt;/li&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- Closing &lt;/li&gt; tag for the li that contains the third unordered list --&gt;
&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;second item third subitem&lt;/li&gt;
&nbsp;&nbsp; &lt;/ul&gt;
&nbsp;&nbsp;&nbsp; &lt;/li&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- Here is the closing &lt;/li&gt; tag --&gt;
&nbsp;&nbsp;&nbsp; &lt;li&gt;third item&lt;/li&gt;
 &lt;/ul&gt;</pre>
<p>Above HTML will output:</p>
<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 style="list-style: square;">
          <li>third item first subitem</li>
          <li>third item second subitem</li>
          <li>third item third subitem</li>
        </ul>
      </li>
      <!-- Closing </li> tag for the li that contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
  </li>
  <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ul>
<h3 id="Nested_&lt;ul&gt;_and_&lt;ol&gt;">Nested &lt;ul&gt; and &lt;ol&gt;</h3>
<pre class="brush: html">
&lt;ul&gt;
  &lt;li&gt;first item&lt;/li&gt;
  &lt;li&gt;second item      &lt;!-- Look, the closing &lt;/li&gt; tag is not placed here! --&gt;
    &lt;ol&gt;
      &lt;li&gt;second item first subitem&lt;/li&gt;
      &lt;li&gt;second item second subitem&lt;/li&gt;
      &lt;li&gt;second item third subitem&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;                &lt;!-- Here is the closing &lt;/li&gt; tag --&gt;
  &lt;li&gt;third item&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>Above HTML will output:</p>
<ul>
  <li>first item</li>
  <li>second item
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>
  <li>third item</li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
  <li>Other list-related HTML&nbsp;Elements: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} and the obsolete {{ HTMLElement("dir") }};</li>
  <li>CSS properties that may be specially useful to style the <span style="font-family: Courier New;">&lt;ul&gt;</span> element:
    <ul>
      <li>the <a href="/en/CSS/list-style" title="en/CSS/list-style">list-style</a> property, useful to choose the way the ordinal is displayed,</li>
      <li><a href="/en/CSS_Counters" title="en/CSS_Counters">CSS counters</a>, useful to handle complex nested lists,</li>
      <li>the <a href="/en/CSS/line-height" title="en/CSS/line-height">line-height</a> property, useful to simulate the deprecated {{ htmlattrxref("compact", "ul") }} attribute,</li>
      <li>the <a href="/en/CSS/margin" title="en/CSS/margin">margin</a> property, useful to control the indent of the list.</li>
    </ul>
  </li>
</ul>
<p>{{ HTML:Element_Navigation() }}</p>
<div class="noinclude">
  {{ languages({ "en":"en/HTML/Element/ul", "de":"de/HTML/Element/ul", "ja":"ja/HTML/Element/ul", "pl":"pl/HTML/Element/ul"}) }}</div>
Revert to this revision