Lesson 4: Types of List

 

In HTML, If you wish to list out a number of items, you can 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
<LI>item 3
</UL>

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

 

  

Example 4.1:
 
<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.

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 code 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.

4.3 The Nested List

This nested list contains lists within lists.

Example 4.2:
 
 
<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 HTML Main Page]