Lab 3
Page 6

Using Lists

Lists are one of the best organizational tools that HTML provides for use on your web pages. They group text items into numbered, bulleted or indented lists.

Ordered Lists

Perhaps the most common type of list is the "ordered list." Once you open such a list, the web browser will automatically number and indent each item on the list for you. This way, you can add and remove and rearrange items without having to worry about changing your entire numbering scheme.

The first step in using any list is to let the browser know that you want to begin keeping a list. For an ordered list, this is done by typing the <ol> tag in your HTML file. Usually, you'll just want to put it alone on an otherwise blank line.

Next, type <li> to indicate a list item. When displayed, this will start a new line with the correct number and indentation. Also on that line, type whatever you would like to appear next to that number.

When you have finished your first list item, you can follow it with however many others you wish by simply typing a <li> and some text for each.

Finally, when you are ready to finish the list, type in </ol> to close it.

Here is an example of an ordered list:

Unordered Lists

Unordered lists are nearly identical to ordered lists, except the browser does not automatically number the list items for you. Instead, it uses symbols such as a little box or a circle to mark each list item.

You can create an unordered list in the exact same way as an ordered list. Just use the <ul> </ul> tags instead of <ol> </ol>.

Here's a sample unordered list:

Definition Lists

Definition lists are somewhat different than ordered and unordered lists. Rather than long indented, bulleted lists, definition lists usually alternate between terms (enclosed in <DT> and </DT>) and indented definitions associated with those terms (enclosed in <DD> and </DD>).

Opening and closing a definition list is much like opening and closing any other list. Simply type <DL> to open one and </DL> to close it.

Within the list, you can use two different types of list items. To create a non-indented list item, simply surround some text with <DT> and </DT>. To create an indented list item, surround it with <DD> and </DD>.

Here's an example of a definition list:

Other Facts About Lists

• You can use any of the fancy text techniques (e.g. bold, italics, etc.) on the text in lists.
  
  
• Lists can be embedded within one another. That is, you can have lists within lists. This is done by opening the second list within a list item of the first list.
  
  
• Lists can be used to keep a group of hypertext links organized (just like at the top of each of these lab pages). You'll learn how to make hypertext links in the next section.

Here is a giant list sampler:

Adding lists to your page