Creating Lists

You can create several different types of lists in your HTML document.
This is a very easy task and the only thing you'll have to remember is which tags make your list appear the way you'd like.

Here is a quick tutorial on how to create a list in your web page.
I'll go over three types of lists.

First you'll need to decide what information will be in your list.

Ok, now that you know what you want your list to contain, let's see how to set it up.

The first step in creating a list is deciding the type of list you want.
There are three basic types of list: ordered, unordered, and definition.
The tag you use to tell the browser to display a list will determine the type of list that you want.
<OL> specifies an ordered list. The item in the list will be preceded by a numeral or letter.
<UL> specifies an unordered list. The items in the list will be preceded by a bullet.
<DL> specifies a definition list. The items in the list will be displayed similar to a definition in a dictionary.

Ok, now that you know what type of list you want, I'll show you how to make it happen.

Example 1

Ordered Lists

First you need to specify an ordered list.
You do so by using the <OL> tag.

Then you'll need to specify each item in the list.
To do this, you'll use the <LI> tag.

And finally, you'll need to specify the end of the list with the </OL>: tag.

Here's how the code would look in your HTML document.

Here's how the code above will display the list.

Item 1
Item 2
Item 3
Item 4

Example 2

Unordered Lists

This list is exactly the same as the ordered list except that the opening and closing tags are changed to <UL> and </UL>

Here is the same list as above.

Here's how it will be displayed.

Item 1
Item 2
Item 3
Item 4

Example 3

Definition lists

This list is a little different. Each Item will actually have two lines attributed to it.
The first line is the Item, and the second line will be the definition.

To start the definition list, you'll use the <DL> tag.
Each item in the list will be preceded by the <DT> tag.
Each item's definition will be preceded by the <DD> tag.
The </DL> tag will be used to close the list.

Here's how the list above would look as a definition list.

<dl>
<dt>Item 1
<dd>This is text about Item 1
<dt>Item 2
<dd>This is text about Item 2
<dt>Item 3
<dd>This is text about Item 3
<dt>Item 4
<dd>This is text about Item 4

And, here's how it is displayed.

Item 1: This is text about Item 1
Item 2: This is text about Item 2
Item 3: This is text about Item 3
Item 4: This is text about Item 4

And there you have three different ways to display the same list.

Choose another tutorial by clicking one of the links below.

Contact Help Desk CityScape News Home