List Test Document

This is an unordered list. However, there are three types of lists that typically show up with bulleted items.

• Unordered lists
• Menu lists (deprecated)
• Directory lists (deprecated)

Unordered List Attribute: TYPE

This attribute allows you to specify the type of bullet used before each list item. It was introduced by Netscape and is part of HTML 3.2.

• Circle: <UL TYPE=CIRCLE>

• Square: <UL TYPE=SQUARE>

• Disc: <UL TYPE=DISC>

Setting Bullet Types using Style Sheets

The list-style-type property can be used to control the appearance of the bullet in browsers that support style sheets.

Unordered list:

• disc is the default bullet
• list-style-type:none
• list-style-type:circle
• list-style-type:square
• list-style-type:square

• disc is the default bullet
• list-style-type:none
• list-style-type:circle
• list-style-type:square

Ordered list:

1. decimal
2. lower-roman
3. upper-roman
4. lower-alpha
5. upper-alpha

If list-style-image is used and the image is not found it reverts to the default bullet character.

Ordered lists are numbered lists. In the following example is a list of popular tomatoes.

1. Beefsteak
2. Better Boy
3. Early Girl
4. Roma
5. Sweet 100

Ordered List Attributes: TYPE and START

Two attributes for ordered lists were added in HTML 3.2. These attributes were introduced by Netscape, and are supported in most versions of Netscape. However, most older browsers do not support these attributes.

START

Specifies a starting number for the list. The default is 1

TYPE

Specifies the numbering style. Allowable values are:

• 1: Plain numbers (default).
• A: Capital letters
• a: Lowercase letters.
• I: Roman numbers in uppercase.
• i: Roman numbers in lowercase.

Here are some examples:

9. TYPE=1 START=9
10. Plain arabic numbers (the default), start at 9

27. TYPE=A START=27
28. Capital letters, start at 27.

3. TYPE=a START=3
4. Lower-case letters, start at 3

30. TYPE=I START=30
31. Upper-case Roman numerals, start at 30

100. TYPE=i START=100
101. Lower-case Roman numerals, start at 100

A menu list is like an unordered list, but it is supposed to be displayed in a more compact format. I've found that most browsers display it exactly like an unordered list. Here is the same list used in the unordered list section for comparison:

Another menu list example:

Some tomato pests are:

A directory list typically shows up with each item bulleted. Items should be no longer than 20 characters, and the HTML specification recommends that browsers should try display them in two columns. However, in my tests I have yet to find a browser that does this. Here is an example directory list:

Tomato diseases include:

Some unusual varieties of tomatoes include:

Big Rainbow

Fruit on this plant may grow up to 2 pounds. They have a rainbow coloring as they mature: green on the top, yellow in the middle and red on the bottom.

Great White

The tomatoes on this plant ripen to a pale yellow color, similar to that of a fresh pineapple.

Purple Calabash

Large "ruffled" fruit characterize this plant. Ripens to a dark, almost purple color.

Here is another example of a definition list:

Ordered List

A list in which each item is numbered

Unordered List

Lists in which each item is indicated by a bullet

Definition List

Lists which have a term followed by a definition. The definition is usually offset by indentation and a carriage return.

Micro-Tom

One of the smallest tomato plants. Mature plants are less than ten inches tall.

Pear

There are several types of pear-shaped cherry tomatoes. Two popular varieties are Red Pear and Yellow Pear.

Tigerette Cherry

A striking orange and red striped cherry tomato.

The same list without the COMPACT attribute:

Micro-Tom

One of the smallest tomato plants. Mature plants are less than ten inches tall.

Pear

There are several types of pear-shaped cherry tomatoes. Two popular varieties are Red Pear and Yellow Pear.

Tigerette Cherry

A striking orange and red striped cherry tomato.

LI Extensions

Unordered List Extensions

• Circle: <LI TYPE=CIRCLE>
• Square: <LI TYPE=SQUARE>
• Disc: <LI TYPE=DISC>

Ordered List Extensions

1. Use capital letters: <LI TYPE=A>
2. Use lower-case letters <LI TYPE=a>
3. Use upper-case Roman numerals <LI TYPE=I>
4. Use lower-case Roman numerals: <LI TYPE=i>
5. Use regular numbers (default): <LI TYPE=1>
10. Start numbers (or letters) at a specific number. In this case, 10: <LI VALUE=10>

1. Paste Tomatoes
• Banana Legs
• Principe Borghese
• Roma
2. Cherry Tomatoes:
• Gold Nugget
• Small Fry
• Sweet 100

You can also nest unordered lists within each other. Notice how some browsers change the bullets for each level:

• Level One
  • Level Two
    • Level Three
      • Level Four
        • Level Five

The TYPE attribute that affects bullet style for unordered lists may also be applied to the LI tag within a list. Note that use of this attribute with other list styles that use bullets may also result in the same effect.

LI TYPE Attribute for UL

• Circle: <LI TYPE=CIRCLE>
• Square: <LI TYPE=SQUARE>
• Disc: <LI TYPE=DISC>

Here is the TYPE attribute used with a MENU list:

LI Attributes for OL: TYPE and VALUE

The TYPE attribute that affects numbering style for ordered lists may also be applied to the LI tag within a list. the VALUE attribute may be used to reset the numbering sequence (akin to the START attribute for OL). Some examples:

1. Use capital letters: <LI TYPE=A>
2. Use lowercase letters <LI TYPE=a>
3. Use uppercase Roman numerals <LI TYPE=I>
4. Use lowercase Roman numerals: <LI TYPE=i>
5. Use regular numbers (default): <LI TYPE=1>
10. Start numbers (or letters) at a specific number. In this case, 10: <LI VALUE=10>

Items in lists may need to be longer than a single paragraph. You may separate paragraphs in a single list item through the use of the P tag. However, many browsers may display the item with a blank line between the paragraphs. This may look strange since many browsers do not place a blank line between items in a list. Another alternative is to separate paragraphs with a BR tag. However, you run the risk of obscuring your paragraph breaks if you choose this route. Take a look at this document in several different browsers to gain a better understanding of the ways that multiple paragraphs in a list are treated.

Unordered List

• First, an unordered list. We will separate this item into two paragraphs using the P tag.

  Here is the second paragraph in our first item.

• Now our second item.
• This item is divided into two sections using BR.
  Here is the portion of the item that appears after the BR tag.

Items with Multiple-Paragraphs in an Ordered List

• This is an unordered list. I will separate this item into two paragraphs using the P tag.

  Here is the second paragraph in the first item.

• Now the second item.
• This item is divided into two sections using BR.
  Here is the portion of the item that appears after the BR tag.

Items with Multiple-Paragraphs in an Definition List

This is a definition list.

I separate this definition item into two paragraphs using a P tag.

Here is the second paragraph in our first item.

Now my second item.

This definition item is divided into two sections using a second DD element.

Here is the second DD element.