Lists

Lists are handy for such common uses as menus or lists of links. You've probably seen lists on many web pages.

There are three types of lists that are currently used in HTML 4 (there were also a couple more, MENU and DIRECTORY, that were used rarely and are now "deprecated." "Deprecated" means that the tags are no longer part of HTML and may not be supported in the future.)

Lists are automatically surrounded by line breaks. You do not need to put lists into paragraphs.

Ordered Lists

Ordered lists are used when you want to put a list of items in numerical order. You don't need to type the numbers; the browser will add them for you automatically.

Here's an example of an ordered list:

Oranges
Lemons
Tangerines
Limes

To get this to display on our page, we need to start with the ordered list tag, OL. OL is a container tag, so the entire list needs to be contained between the OL and /OL, like this:


<OL>

Oranges

Lemons

Tangerines

Limes

</OL>

This alone won't make an ordered list, though. If you stop here and view your code in the web browser, you'll see something that looks like:

Oranges Lemons Tangerines Limes

The browser doesn't know where each item in your list starts and ends, unless you tell it yourself. The way you do this is with the LI, or list item, tag. (By the way, that's LI, not L1.) You place LI and /LI around each item in your list. Here's how you'd use it in this case:


<OL>

	<LI>Oranges</LI>

	<LI>Lemons</LI>

	<LI>Tangerines</LI>

	<LI>Limes</LI>

</OL>

Now, the browser can display the list correctly.

Incidentally, you'll probably see a lot of code in which the list items have an LI at the beginning, but no /LI at the end. This is the older style of writing HTML, and it still works -- but for future work with style sheets and XHTML, you'll need to close the LI tags, so it's a good idea to get in the habit now.

Unordered Lists

Unordered lists are sometimes called bulleted lists. They are very similar to ordered lists, except that unordered lists don't display items in numerical order. They display in a list with a bullet in front of each item.

Here's an example of an unordered list.

Oranges
Lemons
Tangerines
Limes

The code to create this list is almost exactly the same as the code for the unordered list we created above, with the UL and /UL tags replacing the OL and /OL, like this:


<UL>

	<LI>Oranges</LI>

	<LI>Lemons</LI>

	<LI>Tangerines</LI>

	<LI>Limes</LI>

</UL>

Unordered lists are, by far, the most common lists.

Definition (Glossary) Lists

Definition lists are quite a bit different from the other lists you've seen so far. They are typically used to create a glossary or index. Here's an example of a definition list:

Lemon: Citrus; yellow.
Orange: Citrus; orange.
Lime: Citrus; green.

To create a definition list, you have to use three different tags. First, you will need to surround the contents of your entire list with the definition list tag, DL.


<DL>
Lemon
Citrus; yellow.
Orange
Citrus; orange.
Lime
Citrus; green.
</DL>

The next step is to tell the browser which items in your glossary are the terms that are being defined, and which are the definitions themselves. The terms are defined with the DT tag.


<DL>
<DT>Lemon</DT>
Citrus; yellow.
<DT>Orange</DT>
Citrus; orange.
<DT>Lime</DT>
Citrus; green.
</DL>

The last thing to do is to mark all the definitions themselves. This is done with the DD tag, like this:


<DL>
<DT>Lemon</DT>
<DD>Citrus; yellow.</DD>
<DT>Orange</DT>
<DD>Citrus; orange.</DD>
<DT>Lime</DT>
<DD>Citrus; green.</DD>
</DL>

As seen above, these are the results:

Lemon: Citrus; yellow.
Orange: Citrus; orange.
Lime: Citrus; green.

In the next section, we'll learn how to make comments in HTML.

<<-------- p r e v // a i w e b // n e x t -------->>