Make your own free website on

Lesson 4: Types of List


[4.1 The Unordered List][4.2 The Ordered List][4.3 The Nested List]

If we wish to list out a number of items, we could use the following types of listing:

4.1 The Unordered List

Also called unnumbered list or bulleted list. The HTML tags are shown as follow

<LI>item 1
<LI>item 2
<LIitem 3

*Note that <LI> tag does not require a closing tag.

<HEAD><TITLE>Unordered List</TITLE></HEAD>
<H2> Fruits</H2>
<LI> Apple
<LI> Grape 
<LI> Orange
<LI> Pear
<LI> Pineapple
<LI> Water Melon


Copy and paste the above codes to your notepad and save the file as uorlist.html.

Click here  to view  the sample output.

[back to the top]

4.2 The Ordered List

Also known as the Numbered List. It  is very similar in structure to the unordered list, except each list item has a number in front of it, instead of a bullet. Also, the opening tag for the list is <OL> instead of <UL>, and the closing tag is </OL> instead of </UL>. Modify the codes in section 4.1 by changing the tags <UL> to <OL> and </UL> to </UL> and change the title to ordered list. Save the file as orlist.html.

Click here to view the sample output.

[back to the top]

4.3 The Nested List

This nested list contains lists within lists.


<H1 align=center><U> Internet Club</U></H1>
<LI> Mr. Liew
<LI> Mrs James
<LI>Miss Irene
<LI>Committee Members



Copy the codes above and paste them to your notepad. Save the file as nested.html

Click here to view the output.


  [back to the top]

[Back to Main Page]