Lists are extremely useful for organising information in a clear and easily understood format. There are three types of list available. Unordered (or bulleted), ordered (numbered) and definition.
Unordered Lists
The <ul> tag defines the list type and starts the list. The </ul> tag closes the list with the list elements positioned between the two tags. The unordered list element allows a number of attributes, two of the most important are shown below
The type attribute which has been depreciated in HTML 4.01 since this can be better achieved using style definitions. However, the type element allows you to change the appearance of the bullets to circle (a filled circle), disc (an empty circle) and square (a filled square).
The class attribute. This important attribute tells the browser to render the list in a named style and takes the form <ul class="my_list_style"> where "my_list_style" is a previously defined style.
The list items, which are positioned between the <ul> start and end tags, take the form <li>My first item</li> <li>My second item</li> etc.
The list item element allows a number of attributes but the most important is the class attribute which tells the browser to render the list item in a named style and takes the form
<li class="my_list_item_style">My first item</li> where "my_list_item_style" is a previously defined style.
Unordered List Example
<ul class="my_list_style">
<li>My first item</li>
<li>My second item</li>
</ul>
Ordered Lists
The ordered list element is essentially the same as the unordered list element with one difference. The type attribute, again depreciated in HTML 4.01, takes on values that specify the type of numbering to be used.
value="1" produces Arabic numerals - this is the default.
value="A" produces upper case letters.
value="a" produces lower case letters.
value="I" produces large roman numerals.
value="i" produces small roman numerals.
The list items are the same as for unordered list items. Below is an example.
Ordered List Example
<ol class="my_list_style">
<li>My first item</li>
<li>My second item</li>
</ol>
Definition Lists
Definition lists are used where a description is required for each item in the list. The form of definition lists is similar, but with some variation, from the other two types.
The definition list element <dl> starts the list with the </dl> closing it. Between these two tags are the definition term elements tags <dt> and </dt>, alternating with the definition description element tags <dd> and </dd>.
Definition List Example
<dl class="my_list_style">
<dt>First term</dt>
<dd>Descripton of first term</dd>
<dt>Second term</dt>
<dd>Descripton of second term</dd>
</dl>
Nesting Lists
Nesting is the placing of elements within other elements. A nested element behaves independently of its container element. For example if the outer and inner lists are ordered lists, they will be numbered independently of each other.
Free Web Design Tutorials
Creating ListsEmbedding ImagesURLs ExplainedLinking to DocumentsCreating TablesForms - BasicsInput and TextareaSelect ListsFramesetsThe Frame ElementNested FramesetsTargeting FramesInline Frames
Previous - Formatting Text
Next - Embedding Images 
