Lists

LISTS

Lists are a great way to organize data on the page. There are many different kinds of lists which can be created. I’ll be discussing three of them here.

Ordered Lists
Ordered lists are the same as numbered lists, meaning that each data item is uniquely identified by a number. There are tags to indicate the beginning and the ending of the list, and there are also tags to indicate individual data items. Those tags which indicate individual data items go between the list beginning and list ending tags.

<ol> </ol>
These are the beginning and ending tags for your ordered list.

<li>
This is the tag which indicates a particular data item. There is no ending tag for this one.

There will be an example of this at the end of this section, it’s easier to wait until then to show you how this will look.

Unordered Lists
Unordered lists are structured the same as ordered lists, however, they simply have a bullet at the beginning of each data item, not a unique identifier. There are tags to indicate the beginning and the ending of the list, and there are also tags to indicate individual data items. These are the same tags as used with the ordered lists.

<ul> </ul>
These are the beginning and ending tags for your unordered list.

<li>
This is the tag which indicates a particular data item. There is no ending tag for this one.

There will be an example of this at the end of this section, it’s easier to wait until then to show you how this will look.

Definition Lists
Definition lists are different from both ordered and unordered lists. They do have beginning and ending tags similar to the ordered and unordered lists. However, unlike the unordered and ordered lists, definition lists are not based on list items. They are instead based on term-definition pairs.

<dl> </dl>
These are the beginning and ending tags for your definition list.

<dt>
This is the tag which indicates the definition term, the item you are defining. There is no ending tag for this one.

<dd>
This is the tag which indicates the term’s definition, the actual explanation of the definition term. There should be one of these tags for every

tag you use. There is no ending tag for this one.

There will be an example of this at the end of this section, it’s easier to wait until then to show you how this will look.

It is possible to nest lists within lists. It is very simple, you just have to make sure you keep track of all the beginning and ending list tags. I suggest you use indentation to help keep track of nested lists.

Example

Here are some sample pages to demonstrate the discussed tags.

Sample 5: This page will have an ordered and an unordered list.

<html>
<head>
<title>Sample Page #5</title>
<!-- This page created by Valerie Bradley 13 June 1997 -->
</head>

<body bgcolor="FFFFFF" text="000000">

This is an unordered list of pizza topings.<br>
<ul>
<li>Cheese
<li>Pepperoni
<li>Mushrooms
<li>Sausage
</ul>

<hr>

This is an ordered list of steps to make a peanut butter
sandwich.<br>

<ol>
<li>Get bread and peanut butter
<li>Lay out two pieces of bread
<li>Cover one piece with peanut butter
<li>Put other piece on top of peanut butter
<li>Eat
</ol>

</body>
</html>

This is how it would look on a browser.

Sample 6: This page will have a definition list and some nested lists.

<html>
<head>
<title>Sample Page #6</title>
<!-- This page created by Valerie Bradley 13 June 1997 -->
</head>

<body bgcolor="FFFFFF" text="000000">

This is an definition list of some French terms.<br>
<dl>
<dt>Bonjour
<dd>This is French for "Hello".

<dt>Au Revoir
<dd>This is French for "Good Bye".

<dt>D'Accord
<dd>This is French for "OK".
</dl>

<hr>

These are several nested lists.<br>

<ol>
<li>This is in list 1.
   <ul>
   <li>This is in list 2.
      <ol>
      <li>This is in list 3.
      </ol>
   <li>This is in list 2.
   </ul>
<li>This is in list 1.
</ol>

</body>
</html>

This is how it would look on a browser.

Previous | Next

This page created by Valerie Bradley
Last updated: