Unordered Lists — <ul> and <li>

Topics on This Page

The <ul> and <li> Tags
The type Attribute
Nested Lists
Lists and CSS
Example

The <ul> and <li> Tags

<ul>

  Attributes:
     type="disc|square|circle"    (deprecated)

  Contents:
     <li> tags only

<li>

  Attributes:
     type="disc|square|circle"    (deprecated)

  Contents:
     Inline elements and block elements

An unordered list is a list of bulleted items. Here is an example:

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

• List item #1
• List item #2
• List item #3

The </li> tags are optional in HTML, although they're required in XHTML. It's best to get in the habit of using them even in HTML, especially if you're using CSS.

The only content allowed within <ul>...</ul> are <li> tags. You cannot put anything — not even text — inside <ul> unless it's inside an <li>.

You can put pretty much anything you like inside an <li> tag. You can use <p> tags, for instance, if you want the list spread out more:

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

• List item #1

• List item #2

• List item #3

The type Attribute

The type attribute lets you choose the type of bullet. The default choice is disc. If you put type inside a <ul> tag, all of the items in the list use that bullet style. If you put type inside a <li> tag, the results depend on the browser. In some browsers, only that item is displayed with the chosen type. In other browsers, all items from that point on use the chosen type, until another <li> tag with type is found.

<ul>
  <li> List item #1 </li>
  <li type="square"> List item #2 </li>
  <li type="circle"> List item #3 </li>
</ul>

• List item #1
• List item #2
• List item #3

Nested Lists

You can put pretty much anything in an <li> tag. You can even include another list. Unless you specify the bullet type, the browser uses different types for the nested tables.

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

• List item #1
  • Subitem #1
  • Subitem #2
• List item #2
• List item #3
  • Subitem #1
  • Subitem #2

Lists and CSS

You should be able to use a li selector to specify things like color and font-size for items in a list. Once again, Netscape 4 makes your life difficult: it only applies the color and other attributes to the bullet! It's easy to get around this: use a ul selector instead.

<style type="text/css"> <!--
  ul { color: blue; }
--> </style>
  .
  .
  .
<ul>
  <li> List item #1 </li>
  <li> List item #2 </li>
  <li> List item #3 </li>
</ul>

There are some CSS properties provided especially for lists. These include:

list-style-type: disc|circle|square|none;
list-style-image: url(url);
list-style-position: outside|inside;

list-style-type takes the place of the type attribute. It has one additional option: turning off the bullets altogether.

list-style-image lets you replace the bullet with an image. Netscape 4 doesn't recognize this property and will display the normal bullet rather than the image.

list-style-position controls where text is placed if a list item spills onto two or more lines. The default outside gives a rendering like this:

    * Item #1
      2nd line of item #1

inside moves the second line beneath the bullet:

    * Item #1
    2nd line of item #1

list-style-position is not supported in many browsers yet.

Example

Play around with lists a bit. Try applying different styles.

Notice how I styled the inner list differently by using a ul ul selector to select <ul> tags that are inside another <ul> tag.

Try applying the styles to li instead of to ul, especially in Netscape 4. What happens if you use li li in place of ul ul? What happens with ul ul li?

In Netscape 4, you'll see a normal bulleted list. In newer browsers, you'll see an image rather than a bullet for the outer list. What happens in these browsers if you remove the list-style-image: none; from the ul ul rule?