HTML - Lists

1. The first is an Ordered List. That is what this is.
2. The other two are Unordered Lists and
3. Definition Lists.

HTML lists have several components a open (start) tag, an item tag, and an close (end) tag. The start and end tags are similar to other HTML elements. Ordered lists use the <OL> tag, Unordered lists the <UL>, and Definition lists the <DL> tag.

Items in ordered and unordered lists are designated with the tag <LI>. Definition list have title items <DT> and definition items <DD>. Items must use an open tag. The close tags are optional.

Ordered Lists

Ordered Lists may contain attributes indicating the type of sequential order, <TYPE="A">, and the starting number, <START="n"> both of which are included inside the open list tag.

Ordered List Attributes:
• <OL TYPE="A"> can be designated:
  • "A" for upper-case alphabetic,
  • "a" for lower-case alphabetic,
  • "i" for Arabic numbering, and
  • "I" for Roman numbering.
• <OL START="n"> is a numeric representation of:
  • an alphabetic character,
  • a Roman numeral, or
  • an actual number.

The following is a sample of an ordered list from HotSource HTML Help:

Top Personal Computer makers:
1. Dell
2. Gateway
3. Packard Bell

The code for the sample above:

<OL TYPE="I" START="1">Top Personal Computer makers:
<LI> Dell
<LI> Gateway
<LI> Packard Bell
</OL>

Unordered Lists

Unordered Lists may contain attributes indicating the shape of the list item bullet. As with the ordered lists, the type is included in the open tag. The Go2Graphics HTML Tutorial describes these attributes:

• For square bullet points: <UL TYPE="square" >

• For closed circle bullet points: <UL TYPE="disc" >

• For open circle bullet points <UL TYPE="circle" >

The following is a sample of an unordered list:

My Unordered List
• List item 1
• List item 2
• List item 3

The code for the sample above:

<UL>My Unordered List:
<LI> List item 1
<LI> List item 2
<LI> List item 3
</UL>

Definition Lists

Definition Lists are, as the name implies, great to use when defining a list of items. They are also nice to use when the number or sequence isn't important. These lists can make your document easier to read.

Definition title items, <DT>, are place on the left. Each definition, <DD>, is indented to the right. Definition lists help the reader visually see the logical order of your document. Below is a sample of a Definition list from KanDi Design's Hands-On HTML:

This is the first word/item to be defined. It is not indented.

This is the definition line. If the line is too long to stay on one line, or wraps at the browser's edge, the indention is honored for the duration of the definition or until broken by another tag or command.

This is the second word/item to be defined. Notice the line returns to the margin of the page.

This is the definition line for the second word/item.

You can also add another item to the definition if you like.

The third word/item to be defined would be placed here.

This is the definition line for the third word/item.

The following is the code for the sample above:

<DL>
<DT>This is the first word/item to be defined. It is not indented.
<DD>This is the definition line. If the line is too long to stay on one line, or wraps at the browser's edge, the indention is honored for the duration of the definition or until broken by another tag or command.
<DT>This is the second word/item to be defined. Notice the line returns to the margin of the page.
<DD>This is the definition line for the second word/item.
</DL>