Web.Wizard HTML tutorial series

Tutorial 3

Lists

Lists allow important data/information to be presented in a clear and easy-to-read manner. HTML allows three main types.

  1. Unordered, also known as a bullet list, uses <UL>
  2. Ordered, also known as a numbered list, uses <OL>
  3. Definition uses <DL>

<UL>, <OL> and <DL> are the tags that define the type of list. The entries in bullet and numbered lists use the tag <LI>, while entries in a definition list use the tag <DT>.

For example,
<UL>
<LI>first list item
<LI>second list item
<LI>third list item
</UL>
... would be displayed as,
  • first list item
  • second list item
  • third list item
<OL>
<LI>first list item
<LI>second list item
<LI>third list item
</OL>
  1. first list item
  2. second list item
  3. third list item
<DL>
<DT>first list item
<DT>second list item
<DT>third list item
</DL>
first list item
second list item
third list item

In the examples below, lists are nested within lists and different types of lists have been created.

For example,
<OL TYPE=1>
<LI>first list item
   <OL TYPE=i>
      <LI>first nested-list item
      <LI>second nested-list item
   </OL>
<LI>second list item
   <OL TYPE=I>
      <LI>third nested-list item
      <LI>forth nested-list item
   </OL>
<LI>third list item
   <OL TYPE=a>
      <LI>fifth nested-list item
      <LI>sixth nested-list item
   </OL>
</OL>
<LI>third list item
   <OL TYPE=A>
      <LI>seventh nested-list item
      <LI>eigth nested-list item
   </OL>
</OL>
... would be displayed as,
  1. first list item
    1. first nested-list item
    2. second nested-list item
  2. second list item
    1. third nested-list item
    2. forth nested-list item
  3. third list item
    1. fifth nested-list item
    2. sixth nested-list item
  4. forth list item
    1. seventh nested-list item
    2. eigth nested-list item
<UL TYPE=DISC>
<LI>first list item
   <UL TYPE=CIRCLE>
      <LI>first nested-list item
      <LI>second nested-list item
   </UL>
<LI>second list item
   <UL TYPE=SQUARE>
      <LI>third nested-list item
      <LI>forth nested-list item
   </UL>
</UL>
  • first list item
    • first nested-list item
    • second nested-list item
    • second list item
      • third nested-list item
      • forth nested-list item

END OF TUTORIAL

Go back to Contents Back|Next


Please direct any comments to Matthew Bacon at: cadenza@cyberstrider.org
Copyright © Matthew Bacon - Last updated on: 10-07-99

This page was created using Web.Wizard v3.10 © 1997-1999 Cadenza Software