1 2 3 4 5 6 7 8 9 10 11 12 13 14
Back to the Lessons Index

Lists

HTML supports unnumbered, numbered, and definition lists. You can nest lists too, but use this feature sparingly because too many nested items can get difficult to follow.

Unnumbered Lists

To make an unnumbered, bulleted list,

  1. start with an opening list <UL> (for unnumbered list) tag
  2. enter the <LI> (list item) tag followed by the individual item; no closing </LI> tag is needed
  3. end the entire list with a closing list </UL> tag

Below is a sample three-item list: 

    <UL>
    <LI> apples
    <LI> bananas
    <LI> grapefruit
    </UL>

The output is:

The <LI> items can contain multiple paragraphs. Indicate the paragraphs with the <P> paragraph tags.

Numbered Lists

A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses <OL> instead of <UL>. The items are tagged using the same <LI> tag. The following HTML code: 

    <OL>
    <LI> oranges
    <LI> peaches
    <LI> grapes
    </OL>

produces this formatted output:

  1. oranges
  2. peaches
  3. grapes

Nested Lists

Here is a sample nested list: 

    <UL>
    <LI> A few New England states:
        <UL>
        <LI> Vermont
        <LI> New Hampshire
        <LI> Maine
        </UL>
    <LI> Two Midwestern states:
        <UL>
        <LI> Michigan
        <LI> Indiana
        </UL>
    </UL>

The nested list is displayed as