What Are Lists?  pwp home  >   Reference Library  >   basics  >  What Are Lists

Using lists on your page can present information clearly and help readers see the important points of your content. They're a good design element, breaking up the monotony of your page and helping to deliver information in Web-friendly bites. You can easily create indented lists, plain, with bullets, or with numbers, through HTML commands without using images.

Unordered (or bulleted) lists: To make a list with little bullets distinguishing each item, use <UL> and </UL> at the beginning and end of your list (UL stands for Unordered List). For each list item, use <LI> (LI stands for List Item). It denotes the next thing that will receive a bullet. No closing tag is required; neither is a Break or Paragraph command. The LI does all that for you. And you can format the text (with bold, italics, etc.) just like any other text.

<UL> <LI> This is item one <LI> This is item two </UL>

Which would appear on your page as:

• This is item one
• This is item two

If you want to change the shape of the bullet from the default little filled in round ones (called disc) to little square ones, or to little empty circles, just put the shape name in the UL tag: <UL type=whatever> where whatever is the shape you like.
<UL type=square>
<UL type=circle>

Ordered, or numbered lists: If you would like to create a list that numbers the items rather than putting a bullet in front, HTML could do that for you too. Just use <OL> and </OL> at the beginning and end of the list instead of <UL>, and again, <LI> for each item.

<OL> <LI> This is item one <LI> This is another item </OL>

Which would appear on your page as:

1. This is item one
2. This is another item

You can choose between regular Arabic numbers (the default), capital letters, small letters, large Roman numerals, and small roman numerals by using <OL type=whatever>.

A: for capital letters,
a: for lowercase letters,
I: for large Roman numerals
i: for small Roman numerals
Do not use this type attribute if you just want the default 1., 2., 3., etc.

You can put these together; you nest a list within a list, within a list. Just remember to close each one.

<OL TYPE=I> <LI>This is your first main heading <OL TYPE=A> <LI>This is your first subheading <OL COMPACT> <LI> this is the first item <LI> this is another time </OL> <LI>This is your second subheading <OL COMPACT> <LI> this is the first item <LI> this is another time </OL> </OL> <LI>This is the second main heading, etc. </OL>

Which would appear on your page as:

1. This is your first main heading
   1. This is your first subheading
      1. this is the first item
      2. this is another time
   2. This is your second subheading
      1. this is the first item
      2. this is another time
2. This is the second main heading, etc.

The Definition List: The lists above are all single item lists. Each LI command makes one list item. Another kind of list is the definition list; this is a 'double-tier list. It is often used to show main items followed by a definition of each item, but can just as easily be used for other lists. You use a <DL> at the beginning, and </DL> at the end, with each main heading (or term to be defined) denoted by <DT> and each subitem (or definition) denoted by <DD>. You can have multiple <DT> items, each followed by multiple <DD> items. The code is:

<DL> This is the super heading <DT> This is subheading one (or the term) <DD> This is the first item (or the definition) <DD> This is another item <DT> This is subheading two (or the term) <DD> This is the first item (or the definition) <DD> This is another item </DL>

Which would appear on your page as:

This is the super heading

This is subheading one (or the term)

This is the first item (or the definition)

This is another item

This is subheading two (or the term)

This is the first item (or the definition)

This is another item

And that's a basic introduction to lists, a great design tool to help you present your information more clearly.