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

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

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

Example:
 
<HTML
<HEAD><TITLE>Unordered List</TITLE></HEAD>
<BODY>
<H2> Fruits</H2>
<HR>
<UL>
<LI> Apple
<LI> Grape 
<LI> Orange
<LI> Pear
<LI> Pineapple
<LI> Water Melon
</UL>
</BODY>
</HTML>

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.

Example:
 
 
<HTML>

<HEAD><TITLE>Nested List</TITLE></HEAD>
<BODY>
<H1 align=center><U> Internet Club</U></H1>
<OL>
<LI>Advisers
<UL>
<LI> Mr. Liew
<LI> Mrs James
<LI>Miss Irene
</UL>
<LI>Committee Members
<UL>
<LI>Nick
<LI>George
<LI>Francis
</UL>
</OL>
<BODY>

</HTML>

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]