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:

  • apples
  • bananas
  • grapefruit

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

Definition Lists

A definition list (coded as <DL>) usually consists of alternating a definition term (coded as <DT>) and a definition description (coded as <DD>). Web browsers generally format the definition on a new line and indent it.

The following is an example of a definition list:

    <DL>
    <DT> NCSA
    <DD> NCSA, the National Center for Supercomputing
      Applications, is located on the campus of the
      University of Illinois at Urbana-Champaign.
    <DT> Cornell Theory Center
    <DD> CTC is located on the campus of Cornell
      University in Ithaca, New York.
    </DL>

The output looks like:

NCSA
NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign.
Cornell Theory Center
CTC is located on the campus of Cornell University in Ithaca, New York.

The <DT> and <DD> entries can contain multiple paragraphs (indicated by <P> paragraph tags), lists, or other definition information.

The COMPACT attribute can be used routinely in case your definition terms are very short. If, for example, you are showing some computer options, the options may fit on the same line as the start of the definition.

<DL COMPACT>
<DT> -i
<DD>invokes NCSA Mosaic for Microsoft Windows
  using the initialization file defined in the path
<DT> -k
<DD>invokes NCSA Mosaic for Microsoft Windows in
  kiosk mode
</DL>
The output looks like:
-i
invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path.
-k
invokes NCSA Mosaic for Microsoft Windows in kiosk mode.

Nested Lists

Lists can be nested. You can also have a number of paragraphs, each containing a nested list, in a single list item.

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

  • A few New England states:
    • Vermont
    • New Hampshire
    • Maine
  • Two Midwestern states:
    • Michigan
    • Indiana
BreBru.Com Extra Information Technology HTML