Back to Main Page

E-Mail Me! Click Here!

Making Lists

There are three types of lists that can be used to organize information within an HTML doccument. They are the Bulleted list (sometimes called a menu, directory, or unordered list), the numbered (or ordered) list, and the deffinition list. Each is discussed further in a sub-section below.

Making a Bulleted List

Bulleted lists are useful when you want to convey several points quickly, and in an easy-to-read format. People in this age have very little patience, and tend not to read all of....Hey! Where are you going! Come back!

You will most often see bulleted lists used as lists of links, both internal and external. To make a list, place this: <ul> at the top of your list. Then type <li> before each item that will be part of the list. So the following HTML:

<ul>
<li>Banannas</li>
<li>Coconuts</li>
<li>Grapes</li>
<li>Tarzan of the Apes</li>
</ul>

Will look like this on the browser screen:

• Banannas
• Coconuts
• Grapes
• Tarzan of the Apes

<li> is one of the few HTML tags that can be left unclosed. It is not necessary to type </li> after each list item, but it doesn't hurt anything to do so either. I close this tag more out of habit than for any other reason. To turn list items into links, simply surround each line with the HTML for links described in previous sections. There is also an attribute that changes the shape of the bullet. This is a function of the <ul> tag, and looks like this:

<ul type="circle"> -or- <ul type="square">

As far as I know, these are the only two shapes that can be used (other than the default solid circle). The first gives you a hollow circle, and the second is a solid square.

Some versions of Internet Explorer use a solid square as the default shape for a bulleted list, so IE users may see no difference in the shape of your bullets.

How to Make a Numbered List

To get numbers instead of bullets, replace the <ul> and </ul> with <ol> and </ol>.
The finished product should look something like:

1. Gold
2. Frankincense
3. Myrrh

With numbered lists, there are a couple different attributes that can be applied. You can use the "type=" attribute described above; the values for numbered lists are "A" which produces capital letters, "a" which creates lower case letters; "I" which yields traditional Roman numerals, and "i" which gives you index marks, or "lower-case Roman numerals" if you prefer.

The second attribute is start="#" where the pound (#) is any integer. This will start the list at a number (or letter) other than 1. In the case of letters, numbers above 26 will cause the letters to begin doubling up, just like in a spreadsheet (AA=27, AB=28, etc).

How to Create a Deffinition List

HTML

Hypertext markup language, or "Greek to me" if you prefer

Deffinition List

A list with a descriptive sentence or paragraph beneath each item.

The list above is the third and final list type that this page deals with: The deffinition list. It is most commonly found on instructive home pages, and can be very useful for creating a how-to page, and/or a glossary of terms.

Here is the above list with the HTML tags visible:
<dl>

<dt>HTML</dt>

<dd>Hypertext markup language, or <i>"Greek to me"</i> if you prefer</dd>

<dt>Deffinition List</dt>

<dd>A list with a descriptive paragraph beneath each item.</dd>

</dl>

There is only one attribute that can be added to a <dl> tag, and that is "compact". This moves the defined term (<dt>) down to the same line as the deffinition (<dd>), but it does not afford any extra space to the defined term, so words much over four charaters will not be displayed completely. Contiuing the example above, this tag:

<dl compact>

Gives us the following list:

HTML

Hypertext markup language, or "Greek to me" if you prefer

Deffinition List

A list with a descriptive paragraph beneath each item.

As far as I can tell, Netscape does not recognize this attribute at all.

Remember that compact is an attribute, not a value, it should not be placed in quotation marks, and in fact most versions won't recognize it if it is. Also, this attribute has a nasty habit of not functioning properly. Some versions only compact the first item in the list, others skip the first and compact everything else. Perhaps this is why it is so rarely used. This attribute has been eliminated altogether from IE version 5.5 and later.

You can add as many items as you like to the list, just make sure to finish the job by ending the list with </dl>.