There are three main types of lists, they differ in both their presentation and in the semantic meaning.
The OL element is a block level container that denotes an ordered (i.e. numbered) list. It can only take LI elements as content. The OL tag commonly takes two optional attributes, TYPE and START.
TYPE determines the way in which the numbers are displayed, possible values are 1, (the default), a, A, i, and I.
START determines the number that the list starts at, values are always in arabic numberals regardless of what TYPE the list is.
The List Item LI element is the only permissable content of an OL. However the LI is a block level element that can contain most other elements, even other OLs. It takes the TYPE and VALUE attributes which work the same way as TYPE and START do for OL, except that they only affect the LI in question (and in some cases the following LIs.)
<OL TYPE="A">
<LI>This list uses uppercase letters</LI>
<LI>This list item contains another list
<OL TYPE="I" START="5">
<LI>This list uses uppercase roman numerals, starting at 5 (V)</LI>
<LI>This list uses uppercase roman numerals</LI>
<LI TYPE="i">This list item uses lowercase roman numerals...</LI>
<LI>... in Netscape this one will be lowercase, but in IE uppercase</LI>
</OL>
</LI>
<LI>This list uses uppercase letters</LI>
<LI VALUE="10">This list item is numbered as 10...</LI>
<LI>... and this one continues counting from there</LI>
</OL>The UL elements is identical to OL except that it creates an unordered list, this is normally displayed as a bulleted list. There is, obviously, no START attribute but TYPE can take three values: DISC (the default), CIRCLE and SQUARE. Unless otherwise specified nested lists will either cycle through the three styles of bullets or use square bullets for all lists of order greater levels of nesting.
LI behaves nearly the same way as in OLs, with no VALUE attribute but with a TYPE attribute as on UL. Again IE and Netscape differ in how they treat the bullets of items following the specified one.
<UL>
<LI>This is an unordered list</LI>
<LI>This is an unordered list</LI>
<LI>This list item contains another list:
<UL>
<LI>This is the first item in the nested list</LI>
<LI>This list item contains another list:
<UL>
<LI>This is the first item in the nested list</LI>
</UL>
</LI>
</UL>
</LI>
<LI TYPE="square">This list item has a square bullet</LI>
<LI>This item will have a square bullet in Netscape but a round one in IE</LI>
</UL>Note: Due to a peculiar interaction with my stylesheet Netscape displays this example list incorrectly.
The DL is aslightly different in that it has two sorts of content. The Definition Term and the Definition Definition. DT and DD. Typically the DT is rendered unindented and the DD is rendered indented. As well as giving definitions this sort of list can be used, for example, to record the dialogue in a play.
There are no restrictions on what combinations of DT and DD are used. Though it makes sense to always associate one or more DDs with a DT.
<DL>
<DT>Term One</DT>
<DD>Definition One</DD>
<DT>Term Two</DT>
<DD>Definition Two</DD>
<DD>Definition Two</DD>
</DL>All three types of lists take a boolean attribute COMPACT. If this is present then the browser should try to display the list in a more compact fashion, if possible. The following example sets the COMPACT attribute on a DL. Note that it's only possible to display this list in a compact fashion because the content of the DTs is so short.
<DL COMPACT>
<DT>One</DT>
<DD>Definition One</DD>
<DT>Two</DT>
<DD>Definition Two</DD>
<DD>Definition Two</DD>
</DL>There are two more types of lists: MENU and DIR. However most browsers treat these exactly the same as UL, so there is very little point in using them.