Lists

Lists are:

Easy
Fun
Useful

There are three kinds of Lists:

Unordered Lists (UL),
Ordered Lists (OL), and
Definition Lists (DL)

Unordered Lists

Unordered Lists are used to display points or things which do not necessarily need to go in any particular order. All text in an Unordered List must be marked as a List Item, using the LI element. The main attribute UL can have is:

TYPE, with the values of DISC, SQUARE or CIRCLE. These define what kind of bullets the browser should use. The default is disc for most browsers.

Here is the example:

<P>Lists are:</P>
<UL>
<LI>Easy
<LI>Fun
<LI>Useful
</UL>

It is rendered at the top of this page. Notice that "Lists are:" is in a paragraph before the List. Remember that all text in a list must be in an LI element. The urge, for many people and most HTML editing programs, is to use UL as a device to indent text. This is bad. Don't do it. Just say no. Not all browsers render UL as indented. HTML is at its best when all elements are used properly. If you put a bunch of text in a UL element instead of a P and your favorite browser maker changes how their browser handles Unordered Lists, you may well end up having to change a bunch of pages. Yuck.

Ordered Lists

Ordered Lists are a lot like Unordered Lists, except the items should go in some specific order. They are marked by the OL element and can have two main attributes:

TYPE, with the values of 1, I, i, A or a. This determines how a list will be numbered, e.g. 1,2,3; or I, II, III; or i, ii, iii; or A, B, C; or a, b, c. The default is 1.
START, with any integer as its value. The default is 1. For example, in the list marked with <OL START=6>, the first item will be labeled 6, the second 7, etc.

The Example:

<OL TYPE="I">
<LI>West of the Mississippi
	<OL TYPE="A">
	<LI>States
		<OL>
		<LI>Wyoming
		<LI>Oregon
		</OL>
	<LI>Rivers
		<OL>
		<LI>Missouri
		<LI>Snake
		</OL>
	</OL>
<LI>East of the Mississippi
	<OL TYPE="A">
	<LI>States
		<OL>
		<LI>New Jersey
		<LI>Wisconsin
		</OL>
	<LI>Rivers
		<OL>
		<LI>Ohio
		<LI>Hudson
		</OL>
	</OL>
</OL>

It's rendered as:

West of the Mississippi
1. States
  1. Oregon
  2. Wyoming
2. Rivers
  1. Missouri
  2. Snake
East of the Mississippi
1. States
  1. New Jersey
  2. Wisconsin
2. Rivers
  1. Hudson
  2. Ohio

Notice how Lists are nested in other Lists. Any block level elements can go into an LI element, including other Lists. Nesting can be tricky. If you have a List inside an LI element, remember to end the List before you go on to the next LI element. Indenting your HTML in your text editor can help you keep track of which List you're working on at any time; however, indentation in your HTML will have no effect on how the page is rendered in a browser.

Definition Lists

Definition lists are just that: lists of terms and their definitions. One very handy use of definition lists is for annotated lists of links. We'll cover that when we go over Links. Definition Lists are marked by the DL element; terms to be defined (Definition Terms) are marked in the DT element; and the Definitions themselves are marked using DD elements.

<DL> <DT>World Wide Web <DD>Groups of computers all hooked up to a common network, using a common protocol, HTTP

<DT>FTP <DD>Short for File Transfer Protocol, used to store and retrieve files from remote computers

<DT>Gopher <DD>A protocol using a menu-based system to connect with other computers </DL>

And it's rendered as:

World Wide Web: Groups of computers all hooked up to a common network, using a common protocol, HTTP
FTP: Short for File Transfer Protocol, used to store and retrieve files from remote computers
Gopher: A protocol using a menu-based system to connect with other computers

Like LI, DD can contain any other block level element, including other lists. The same caveats apply to using DD as a way to indent text that went for using UL. Indenting is not the intended behavior; it just happens to be indented on some browsers.

Previous: Preformatted Text
Next: Divisions