Chapter 4: Lists

	Sign In Sign-Up

While simple in concept, lists can be very powerful in execution. There are three types of lists: unordered lists, ordered lists, and definition lists. The first two are very similar in structure, while definition lists have a unique setup.

Unordered Lists

The term "unordered list" may be a bit unfamiliar to you, but odds are you've heard of the "bullet list." That's exactly what an unordered list is -- a list of items, each one preceded by a "bullet" (a distinctive character; typically, a small black circle).

The list begins and ends with the tags <UL> and </UL> respectively. Each item in the list is marked using the <LI> tag, which stands for "List Item." <LI> has a corresponding </LI>, but this closing tag is not required to end the list item (although you could use one if you really wanted to). You can use as many list items as you like, up to your browser's built-in maximum, if any.

Here's the markup for a simple list:

   <UL>
   <LI>Monday
   <LI>Tuesday
   <LI>Wednesday
   <LI>Thursday
   <LI>Friday
   </UL>

If you loaded an HTML page containing the markup above, you would see the days of the week, each one preceded by a "bullet." To wit:

Monday
Tuesday
Wednesday
Thursday
Friday

Almost anything can be put into a list item -- line breaks, entire paragraphs, images, links, or even other lists. For example:

   <UL>
   <LI>Monday
   <LI>Tuesday
   <LI>Wednesday
     <UL>
     <LI>6am - 9am
     <LI>9am - 12n
     <LI>12n - 3pm
     <LI>3pm - 6pm
     </UL>
   <LI>Thursday
   <LI>Friday
   </UL>

In the above case, under "Wednesday" in the 'outer list,' you would find another unordered list (the three-hour blocks of time), which is referred to as a nested list. (In the markup above, I have indented the nested list for purposes of clarity; this is not required for the lists to work. Remember what I've said about whitespace...) Here's how it looks:

Monday
Tuesday
Wednesday
- 6am - 9am
- 9am - 12n
- 12n - 3pm
- 3pm - 6pm
Thursday
Friday

In theory, you could probably nest lists indefinitely, but a bit of restraint is called for. Don't nest them too deeply unless you absolutely have to, if for no other reason than aesthetics. Nesting lists too far can look pretty bad.

Ordered Lists

On the face of it, ordered lists look a lot like unordered lists, and a lot of the same rules apply to both constructs. The only difference in HTML is that instead of using <UL> and </UL>, an ordered list is contained within the tags <OL> and </OL>. Ordered lists are based on list items, just as unordered lists are.

However, when an ordered list is displayed in a Web browser, it uses an automatically generated sequence of item markers. In other words, the items are numbered. The markup for a simple ordered list, based on the first example in this chapter:

   <OL>
   <LI>Monday
   <LI>Tuesday
   <LI>Wednesday
   <LI>Thursday
   <LI>Friday
   </OL>

The above markup will look similar to the previously discussed simple unordered list, with the important difference that each day of the week is numbered instead of preceded by a "bullet." In other words, it looks like this:

Monday
Tuesday
Wednesday
Thursday
Friday

Ordered lists are as nestable as unordered lists, and you can nest unordered lists in ordered lists, as well as the other way around. This can get pretty complicated, but sometimes it's what you need.

Definition Lists

As you might expect, definition lists begin and end with the tags <DL> and </DL>. However, unlike the unordered and ordered lists, definition lists are not based on list items. They are instead based on term-definition pairs.

Here's the markup for a basic definition list:

   <DL>
   <DT>Do
   <DD>a deer, a female deer
   <DT>Re
   <DD>a drop of golden sun
   <DT>Mi
   <DD>a name I call myself
   <DT>Fa
   <DD>a long, long way to run
   <DT>Sol
   <DD>a needle pulling thread
   <DT>La
   <DD>a note to follow so
   <DT>Ti
   <DD>a drink with jam and bread
   </DL>

A good way to think of it is that <DT> stands for "Definition-list Term" and <DD> stands for "Definition-list Definition." When the above list is displayed, it arranges the elements such that each term is associated with the corresponding definition. The exact arrangement of elements may vary from browser to browser. Here's how the above markup comes out:

Do: a deer, a female deer
Re: a drop of golden sun
Mi: a name I call myself
Fa: a long, long way to run
Sol: a needle pulling thread
La: a note to follow so
Ti: a drink with jam and bread

Similar to ordered and unordered lists, definition lists can be arbitrarily long. Almost any structure can be placed in a <DD> tag, but putting large-scale structures (such as paragraphs, headings, and other lists) in the <DT> tag is not legal, according to the HTML Specification 2.0. You can leave out one part of a DT-DD pair, but this is not recommended.

There is one attribute to the <DL> tag, which is compact. This causes the display of the definition list to be compacted. What does that mean? It means that the information contained in the <DD> will be displayed on the same line as the <DT> term, if possible. (By the way, Microsoft's Internet Explorer does not support this attribute, so the examples in this section aren't going to work if you're using Explorer.) The markup would start out:

   <DL compact>
   <DT>Do
   <DD>a deer, a female deer
   <DT>Re
   <DD>a drop of golden sun
   .....

...and the entire compacted list would look a bit different than the first definition-list example. Thus:

Do: a deer, a female deer
Re: a drop of golden sun
Mi: a name I call myself
Fa: a long, long way to run
Sol: a needle pulling thread
La: a note to follow so
Ti: a drink with jam and bread

Pretty neat, eh? One word of warning, though: this will only work when your terms are short enough to allow the definition to appear on the same line. If the term is too long, the definition will start on the next line, just as they would in an uncompacted list. Here's an example:

1.: The first part of the second clause shall be, in case of tort appeal, herewith known as "Oscar," unless it is Tuesday, in which case...
Section II. Non-corporeal entities: In the case "Beckwith v. Snuffleupagus" it was shown that the claimed existence of a normally invisible being does not in and of itself constitute evasion or fraud...

In the first case, the term "1." is so short that there is no problem with starting the definition on the same line as the term. In the second case, however, since the term is so long, the definition is forced to start on the next line.

In the next chapter, we'll see out how to spice up text even more by using what I refer to as "special-effect" tags.