Previous Contents Next
7. Using Lists

HTML provides a variety of methods for representing lists of items. These lists can include bulleted and numbered lists along with definitional lists as used for glossary items.

Unordered Lists

An unordered list <UL> is a set of list items <LI> each of which, when displayed, is indented and preceded by a bullet character. For example, the code

<UL>
    <LI >This is the first item
    <LI>This is the second item
    <LI>This is the third item
</UL>

produces the display

  • This is the first item
  • This is the second item
  • This is the third item

(Note that the items in the list do not have to be typed with indentions in HTML. They are done above for clarity in seeing the structure of the list.)

You can include a title or heading for the list by placing it after the <UL> specification, and you can use other character formatting codes within the heading or within the list:

<UL><B>A List Title</B><BR>
    <LI><I>This is the first item</I>
    <LI><I>This is the second item</I>
    <LI><I>This is the third item</I>
</UL>
    A List Title
  • This is the first item
  • This is the second item
  • This is the third item
Incidentally, you can use the <LI> tag by itself for an unindented, bulleted list.

Ordered Lists

An ordered list <OL> contains list items <LI> that are formatted the same as with the unordered list except that, instead of bullets, numbers are used. Thus
<OL>This is an Ordered List<BR>
    <LI>This is the first item
    <LI>This is the second item
    <LI>This is the third item
</OL>
    This is an Ordered List
  1. This is the first item
  2. This is the second item
  3. This is the third item
You can use letters or Roman numbers for the list items by adding the TYPE parameter to the <OL> tag. The type can be one of the values:

A - Large letters.
a - Small letters.
I - Large Roman numerals.
i - Small Roman numerals.
1 - Numbers.

This, along with the fact that you can nest unordered or ordered lists, allows you to produce outlines with various level indicators. For example:

<OL TYPE=I>
<LI>Major Subdivision
    <OL TYPE=a>
    <LI>Minor Subdivision
        <UL>
        <LI>Unordered 1
        <LI>Unordered 2
        </UL>
    <LI>Minor Subdivision
    </OL>
<LI>Major Subdivision
</OL>
  1. Major Subdivision
    1. Minor Subdivision
      • Unordered 1
      • Unordered 2
    2. Minor Subdivision
  2. Major Subdivision

Definition Lists

A definition list <DL> establishes a list of terms <DT> and their accompanying definitions <DD>. The terms appear blocked to the left while the definitions follow on the next line, are indented, and are word wrapped if longer than the width of the browser window. Thus, the defintion list:

<DL>
   <DT><B>First term</B>
      <DD>Here is the definition for the first term.
   <DT><B>Second term</B>
      <DD>Here is the definition for the second term.
   <DT><B>Third term</B>
      <DD>Here is the definition for the third term which extends beyond the width of the browser window.
</DL>

produces the output:

First term
Here is the definition for the first term.
Second term
Here is the definition for the second term.
Third term
Here is the definition for the third term which extends beyond the width of the browser window.

Again, remember that the manner in which you indent the list items in your editor is irrelevant to the manner in which they are displayed on the screen. The browser keys on the tags and applies its own indention scheme depending on the type of list described.

Occasionally, this convenience can be an aggravation. For example, you might not like the default indention scheme and wish to apply your own. Unfortunately, there is no easy way to do this since tabs and space characters do not exist in current versions of HTML. Therefore, you must use work-around methods. At best, you can insert spaces in a line using the symbol code for the non-break space character: &nbsp;. So, if you wish to indent a list of numbered items to appear as follows:

Your Own Indented List
   1.  First item
   2.  Second item
   3.  Third item

then you need to code the list as follows:

Your Own Indented List<BR>
&nbsp;&nbsp;&nbsp;1.&nbsp;&nbsp;First item<BR>
&nbsp;&nbsp;&nbsp;2.&nbsp;&nbsp;Second item<BR>
&nbsp;&nbsp;&nbsp;3.&nbsp;&nbsp;Third item<BR>

  ...not the easiest way to add spaces to a line, but better than no solution at all.

Previous Contents Next