Lesson 7: Creating Lists

We've just about learned everything there is to know about text formatting, but there's still one very important thing that we have to learn: Lists.

Lists are everywhere. We post them on our refrigerators and take them to the grocery store. Lists are a very efficient way to organize information. Naturally, HTML has a few tags to help you make lists. HTML has not 1, not 2, but 3 different types of lists that you can add to your pages! They are the ordered, unordered, and definition lists.

Ordered lists are exactly what the name implies: lists that follow a numerical order. Ordered lists begin with the <OL> tag and end with a </OL> tag. When we want to put an item into this list, we need to put a <LI>, or list item tag before that item.

Here's an example of the ordered list syntax:

What do I need from the store today?<p>

<OL>
<LI>Bread
<LI>Cheese
<LI>Milk
<LI>Butter
</OL>

And heres how it looks to our viewers:

What do I need from the store today?

  1. Bread
  2. Cheese
  3. Milk
  4. Butter

Sure thing, but what if we do'nt want our list items to be numbered? That's when we use Unordered Lists. These are also called Bulleted Lists. Bulleted lists begin with the <UL> tag, and end with the </UL> tag. They look exactly like ordered lists, except the item numbers are replaced with special characters called bullets. Here's an example of how bulleted lists are used:

The Tutorial Underground is:<p>

<UL>
<LI>Cool!
<LI>Free!
<LI>Informative!
</UL>

And here's how it would look to Joe Browser (our viewer!):

The Tutorial Underground is:

Think that's cool? Try adding the TYPE attribute to the UL tag! With the TYPE attribute, we can change the type of bullet that we want to use! The TYPE attribute takes three arguments: "disc", "square" or "circle". So our new <UL> tag with a circle bullet would look like this: <UL TYPE="circle">. The TYPE attribute can also be used in the <OL> tag to change from numbers to letters (capital[TYPE="A"] or small[TYPE="a"]), or roman numerals (uppercase[TYPE="I"] or lowercase[TYPE="i"]). If we want to make an ordered list with uppercase roman numerals, it looks like this:

<OL TYPE="I">

The <LI> tag also has an attribute: VALUE. With the VALUE attrbute, we can change the value of a list item! Take a guess, what result would the following code result in:

<OL TYPE="A">
<LI VALUE="2">Think hard now!
</OL>

If you guessed "B. Think hard now!" you're right? Why? Check out the combination of the TYPE and VALUE attributes!

Heres a little trick: we can start an ordered list with any number (or letter, if we use TYPE) with the START attribute. It looks like this:

<OL START="3">
<LI>This is item number 3! </OL>

And to our viewers at home, it looks like this:

  1. This is item number 3!
The last list that we can use is the Definition List. Definition lists are normally used when we need to define terms. The definition list starts with the <DL> tag and ends with the </DL> tag. Each term to be defined in a definition list uses the <DT> or Definition Term tag. Every definition in a definition list needs a <DD>, or I do'nt know what DD stands for :) tag in front of it. It probably looks alot like this:

<DL>
<DT>HTML <DD>Hypertext Markup Language
<DT>XML <DD>eXtensible Markup Language
</DL>

Our friend Joe Browser see's it like this:

HTML
Hypertext Markup Language
XML
eXtensible Markup Language

Note that you can create really cool effects if you use the formatting tags inside of lists. It's really neat when you have Bold terms and Italic definitions (in my opinion anyway)!

Great! Now we can list all our family members and their cats on our page! What's next? Click here for the next lesson!

Back to Blacksun's Mainpage