Creating An Unordered List

What's an Unordered List and why use it?

At some point in your coding careers you may have to present your viewers with a List of things. The Unordered List allows you to build and maintain large bulleted lists of whatever it is you need to list on your page.

The tags we will be using are the <UL> and </UL> Unordered List tag and the <LI> List Item tag. Notice that the <UL> Unordered List Opening Tag also has a </UL> Closing tag and the <LI> List Item does not.

Let's pretend I have a list of ingredients I want to put on a recipe page:

1 egg white, 1 cup of milk, 2 cups of flour, and 1 tablespoon of sugar

To show these better on a page we can put them into a bulleted list:

My Cool New Recipe

<UL>

<LI> 1 egg white
<LI> 1 cup of milk
<LI> 2 cups of flour
<LI> 1 tablespoon of sugar

</UL>

I have my Opening tag, <UL>, which tells the browser I want to show a list, then I have specified each List Item <LI>, and then finally I have told the browser that my list is complete by using the </UL> Closing tag.

Here is how it will appear on your page:

My Cool New Recipe

  • 1 egg white
  • 1 cup of milk
  • 2 cups of flour
  • 1 tablespoon of sugar

Lists are very easy to create once you get used to them. I am sure you will have no trouble creating lists on your own pages!


TIPS TO REMEMBER:

There is no limit to the amount of <LI> List Items that you can put into one <UL> Unordered List.

The <UL> Unordered List tag will automatically indent the items you specify with the <LI> List Item tag, so you won't have to code in spaces as well.

The <UL> tag MUST have the Closing </UL> tag, to complete the list properly.


Return to the Tutorial Menu HTM-Hell: HTML For Newbies
Email: webmaster@gazoo.net

  Design and Tutorials by Gazoo, Infinity International ©1998  

Click Here!