Skip to Publishing to the Internet Web Design Homepage

LISTS

LISTS are used to designate various listed items, much like bullets do in word processors. They are excellent for providing a list of items in your web page.

There are three types of lists - Ordered, Unordered, and Definition.

Ordered Lists

Ordered lists give values to each item in the list. Lists are always indented away from the bullet or number. The tag to start an Ordered List is <OL>. Once the browser knows that an ordered list has been started, it then looks for items to list. Listed items are defined with the <LI>, or list item tag.

<OL>
<LI>This is item 1.</LI>
<LI>This is item 2.</LI>
</OL>
would display

  1. This is item 1.
  2. This is item 2.

The <LI> tag does not have to be closed, but the <OL> tag does. I recommend <LI> be closed if each item in your list is more than a few words in length, to ease in editing. Other text formatting tags can be included within the list items.
You can also specify other types of bullets for your list with the TYPE attribute. TYPE must be equal to one of the following -
1 for numbers (this is the default and does not have to be specified).
A for capital letters
a for small letters
I for capital roman numerals.
i for small roman numerals.

You can also specify the starting value with the START attribute. START is always equal to a number. If you specify letters or roman numerals for your list items, you must convert the letter's value into a number (a=1, b=2, etc.).

<OL TYPE="I" START="4">
<LI>I am item 1.
<LI>I am item 2.
</OL>
would display

  1. I am item 1.
  2. I am item 2.

Notice that I did not close the <LI> tags. TYPE="I" designated capital roman numerals and START="4" meant to start the list on roman numeral IV.

You can override the type of bullet and each bullet's value within the <LI> tag with the TYPE and VALUE attributes. Only use these if you want the list to change bullet types or bullet values part way throught the list.

<OL TYPE="a" START="4">
<LI>I am item 1.
<LI TYPE="1" VALUE="3">I am item 2.
</OL>
would display

  1. I am item 1.
  2. I am item 2.

As you can see, this doesn't make a lot of sense, but it is an option to you. Be sure not to confuse the START attribute of the <OL> tag with the VALUE attribute of the <LI> tag.

Unordered Lists

Unordered lists are very similar to ordered lists, except list items are not numbered, but designated by graphical bullets. The tag for an unordered list is, you guessed it, <UL>.

<UL>
<LI>I am item 1.
<LI>I am item 2.
</UL>
would display

Notice how the unordered list is indented. By default the bullet is a filled-in circle, called a disc in HTML. You can specify the type of bullet for the list using the TYPE attribute in the <UL> tag. You can choose from the following types:

Similar to ordered lists, you can override the type of bullet in each list item.

<UL TYPE="square">
<LI>I am item 1.
<LI>I am item 2.
<LI TYPE="circle">I am item 3 with a circle bullet.
<LI>I am item 4.
</UL>
would display

HINT: IN NETSCAPE, WHEN YOU CHANGE THE TYPE OF LIST ITEMS WITHIN BOTH ORDERED AND UNORDERED LISTS, THE CHANGE AFFECTS ALL ITEMS FOLLOWING THE CHANGE. IN INTERNET EXPLORER, THE TYPE OF BULLET FOLLOWING THE CHANGE WILL NOT BE AFFECTED. ITEM 4 ABOVE WOULD HAVE A SQUARE BULLET IN IE AND A CIRCLE BULLET IN NETSCAPE. THE VALUE ATTRIBUTE OF THE <LI> AFFECTS THE VALUES OF THE BULLETS THAT FOLLOW THE CHANGE IN BOTH BROWSERS.

Definition Lists

Definition lists are used for defining or describing words or phrases on your webpage. The definition list is comprised of three tags.

<DL> designates the beginning of the definition list. The browser then would look for definition items.
<DT> Definition Term designates the word or phrase to be defined.
<DD> Definition Description is the actual definition of the <DT>.

<DL>
<DT>Gallows
<DD>Frame for hanging condemned persons.
<DT>Gallstone
<DD>Stony mass in the gall bladder.
</DL>
would display

Gallows
Frame for hanging condemned persons.
Gallstone
Stony mass in the gall bladder.

Pretty simple, eh? (I am not meaning to be morbid, I just popped open my dictionary and used the first definitions I found.) Notice how the descriptions are indented. Every <DT> must have a <DD>. Be sure to close the </DL> tag.

HINT: YOU CAN NEST LISTS, OR PLACE ONE LIST WITHIN ANOTHER. IT IS EASIEST TO CREATE YOUR MAIN LEVEL LIST FIRST, THEN INSERT THE NESTED LIST AT THE APPROPRIATE PLACE IN YOUR HTML. THIS CAN BE HANDY FOR A TABLE OF CONTENTS OR OUTLINES.

    ANOTHER HINT: USING THE <OL> TAG IS A GREAT WAY TO SIMULATE INDENTS. JUST SURROUND YOUR PARAGRAPH WITH THE <OL> AND </OL> TAGS AND DON'T INSERT ANY <LI>'S TO GET THIS EFFECT. YOU COULD USE THE <BLOCKQUOTE> TAG TO GET A SIMILAR EFFECT.

Go to Publishing to the Internet

Return to the Class Homepage