Ordered and Unordered Lists

Topics on this page:

1. Brief description
2. The type attribute
3. The start and value attributes
4. My coding style

Brief Description

An unordered list produces a bulleted list. An ordered list produces a numbered list. Create a list by using an <ul> tag (unordered list) or a <ol> tag (ordered) list. Use a <li> tag for each list item. The closing </li> tags are optional when using HTML (they are required in XHTML). The closing </ul> and </ol> tags are required.

The list is always shown with a little bit of indentation.

<ul>
  <li> List item #1. </li>
  <li> List item #2. </li>
  <li> List item #3. </li>
</ul>

<ol>
  <li> List item #1. </li>
  <li> List item #2. </li>
  <li> List item #3. </li>
</ul>

The Type Attribute

For unordered lists, you can specify the type of bullet you'd like by using the type attribute. Type for underdered lists is not supported for IE 3 - you'll always get the default disc in that browser.

For ordered lists, you can specify the type of numbering. IE 3 does support the type attribute for ordered lists.

Here are the valid types:

For both types of list, the type attribute can be placed inside the <ul> or <ol> to apply to the whole list, or it can be placed inside the <li> tag to apply to an item in the list.

The version 5 browsers have changed the way the type attribute is handled in <li> tags. Browsers up through version 4 carry a changed type on to following <li> tags. IE 5 no longer does this, and it appears that Netscape 5 won't either.

<ul>
  <li type="square"> Item #1 </li>
  <li> Item #2 </li>
</ul>

In the version 4 browsers and earlier, "Item #2" will have a square bullet. In the version 5 browsers, it will have the default disc bullet.

The Start and Value Attributes

For ordered lists, you can use the start attribute in the <ol> tag to specify the starting value. <ol start="5"> produces a list that starts with the number 5 - or with "E", "e", "V" or "v" for the other type codes.

You can also use the value attribute in a <li> tag to change the numbering.

Example:

5. List item #1.
6. List item #2.
8. List item #3.
9. List item #4.

<ol start="5">
  <li> List item #1. </li>
  <li> List item #2. </li>
  <li value="8"> List item #3. </li>
  <li> List item #4. </li>
</ol>

My Coding Style

For lists with short list items, I code lists the way I've shown above. I indent a couple of spaces for each list item.

When the list items are longer, I put the <li> and </li> tags on separate lines and indent the text. Sometimes I'll put the end </li> and the next starting <li> on the same line.

• To create an unordered list, you use the UL tag plus a set of LI tags. The UL tag requires a closing tag, but the closing tag for LI is optional.
• You can use a type attribute in the UL tag to affect the entire list, or you can use it in the LI tag to affect specific list items.

<ul>
  <li>
    To create an unordered list, you use the UL tag plus a
    set of LI tags. The UL tag requires a closing tag, but
    the closing tag for LI is optional.
  </li><li>
    You can use a type attribute in the UL tag to affect the
    entire list, or you can use it in the LI tag to affect
    specific list items.
  </li>
</ul>