HTML:Element:ul

From MDC

[edit] 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.

• Element type: block-level
• Allowed content: li

[edit] Attributes

type Deprecated

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 Deprecated

Indicates that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent.

[edit] Examples

[edit] 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

[edit] 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

[edit] 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

[edit] 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.

[edit] See also

• HTML List item element
• HTML Ordered list element
• CSS list-style property
• CSS counters