mozilla

Revision 37280 of <ul>

  • Revision slug: HTML/Element/ul
  • Revision title: ul
  • Revision id: 37280
  • Created:
  • Creator: PablO
  • Is current revision? No
  • Comment /* Notes */

Revision Content

Summary

Unordered list element is used to indicate an unordered list, namely a collection of items that do not have a numerical ordering, and their order in the list is meaningless. The individual items in the list are defined by the list item (<li>) element, which is the only allowed element within a <ul> tag.

Attributes

type {{template.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 user agent might decide to use a different bullet depending on the nesting level of the list unless the type attribute is used. The WebTV interface also supports a triangle bullet. This attribute is deprecated, use CSS list-style-type property instead.
compact {{template.Deprecated_inline()}}
Indicates that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent.

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</li>
        <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
    • 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

Notes

You can nest as many lists as you want, <ul> and <ol> in any order.

To change indent of list, use CSS margin property.

See also

Revision Source

<h3 name="Summary"> Summary </h3>
<p><b>Unordered list</b> element is used to indicate an unordered list, namely a collection of items that do not have a numerical ordering, and their order in the list is meaningless. The individual items in the list are defined by the <a href="en/HTML/Element/li">list item</a> (<a href="en/HTML/Element/li">&lt;li&gt;</a>) element, which is the only allowed element within a <code>&lt;ul&gt;</code> tag.
</p>
<ul><li> Element type: <a href="en/HTML/Block-level_elements">block-level</a>
</li><li> Allowed content: <a href="en/HTML/Element/li">li</a>
</li></ul>
<h3 name="Attributes"> Attributes </h3>
<dl><dt>type {{template.Deprecated_inline()}}</dt><dd> Used to set the bullet style for the list. The values defined under <a href="en/HTML3.2">HTML3.2</a> and the transitional version of <a href="en/HTML4.01">HTML 4.0/4.01</a> are <code>circle</code>, <code>disc</code>, and <code>square</code>. A user agent might decide to use a different bullet depending on the nesting level of the list unless the type attribute is used. The WebTV interface also supports a <code>triangle</code> bullet. This attribute is deprecated, use <a href="en/CSS">CSS</a> <a href="en/CSS/list-style-type">list-style-type</a> property instead.
</dd></dl>
<dl><dt>compact {{template.Deprecated_inline()}}</dt><dd> Indicates that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent.
</dd></dl>
<h3 name="Examples"> Examples </h3>
<h4 name="Simple_example"> Simple example </h4>
<pre>  &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>
<h4 name="Nesting_list"> Nesting list </h4>
<pre>  &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;ul&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;/ul&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
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
  <li>third item</li>
</ul>
<h4 name="Nested_.3Cul.3E_and_.3Col.3E"> Nested &lt;ul&gt; and &lt;ol&gt; </h4>
<pre>  &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>
<h3 name="Notes"> Notes </h3>
<p>You can nest as many lists as you want, <code>&lt;ul&gt;</code> and <code>&lt;ol&gt;</code> in any order.
</p><p>To change indent of list, use <a href="en/CSS">CSS</a> <a href="en/CSS/margin">margin</a> property.
</p>
<h3 name="See_also"> See also </h3>
<ul><li> <a href="en/HTML/Element/li">HTML List item element</a>
</li><li> <a href="en/HTML/Element/ol">HTML Ordered list element</a>
</li><li> <a href="en/CSS/list-style">CSS list-style property</a>
</li><li> <a href="en/CSS_Counters">CSS counters</a>
</li></ul>
Revert to this revision