Introduction to HTML
Lists and Indents
Copyright © 1996 - 2002 Randy D. Ralph.    All rights reserved.
  Font Functions Anchors & Links   Course Contents  
In place May 18, 1996.    Last updated May 26, 2000.

List Types: Ordered
(Numbers/Letters) 		Unordered
(Bullets) 		Definition
(Hierarchical)
List Tricks: Nesting Lists
within Lists 		Alternatives
to Lists

 

Ordered Lists:

Ordered lists look like this:

Recipe:
  1. Flour
  2. Sugar
  3. Butter
  4. Eggs
  5. Milk
 Recipe:
  1. Flour
  2. Sugar
  3. Butter
  4. Eggs
  5. Milk
 Recipe:
  1. Flour
  2. Sugar
  3. Butter
  4. Eggs
  5. Milk

Ordered lists are always indented. The basic form of the command structure used to generate an Ordered List is:

<ol>
<li>  (Each individual List Item and its description goes here)
<li>  (Note that the list item argument requires no closing)
</ol>

Both the <ol> and <li> commands permit the use of two parameters which govern the style and presentation of the list depending on where and how they are used:

type=style setting

Where the style settings are:

1 - the default setting produces a simple numbered list.
A - produces a lettered list in uppercase.
a - produces a lettered list in lowercase.
I - produces a list which uses uppercase Roman numerals.
i - produces a list which uses lowercase Roman numerals.

If one of these command parameters is used in the <ol> command then it will apply to the whole list.  If it is used in the <li> command it will apply from the current list item onward within the list.

value=starting value

Where the starting value is provided as a whole number.  If a starting value is set in the <ol> command the whole list should start with the provided number.  If a starting value is set in the <li> command it applies from the current list item onward in the list.

Examples:

Code Result Code Result Code Result
<ol>
<li>Milk
<li value=8>Eggs
<li>Butter
<li>Bread
</ol>
  1. Milk
  2. Eggs
  3. Butter
  4. Bread
<ol type=A>
<li value=23>Milk
<li>Eggs
<li>Butter
<li>Bread
</ol>
  1. Milk
  2. Eggs
  3. Butter
  4. Bread
<ol type=I>
<li>Milk
<li>Eggs
<li>Butter
<li>Bread
</ol>
  1. Milk
  2. Eggs
  3. Butter
  4. Bread
 

Unordered Lists:

Unordered lists - lists that are simply bulletized - look like this:

Recipe:
  • Flour
  • Sugar
  • Butter
  • Eggs
  • Milk
 Recipe:
  • Flour
  • Sugar
  • Butter
  • Eggs
  • Milk
 Recipe:
  • Flour
  • Sugar
  • Butter
  • Eggs
  • Milk

Unordered lists are always indented. The basic form of the command structure used to generate an Unordered List is:

<ul>
<li>  (Each individual List Item and its description goes here)
<li>  (Note that the list item argument requires no closing)
</ul>

Both the <ol> and <li> commands permit the use of a single parameter which governs the style of the list depending on where and how it is used:

type=bullet style

Where the bullet styles are:

disc - the default setting produces a simple closed burger dot style.
circle - produces an open burger dot style.
square - produces a solid square dot style.

If one of these command parameters is used in the <ol> command then it will apply to the whole list.  If it is used in the <li> command it will apply from the current list item onward within the list.

Note: Browsers will portray these list element bullet styles quite differently.

Examples:

Code Result Code Result Code Result
<ul type=disc>
<li>Milk
<li value=8>Eggs
<li>Butter
<li>Bread
</ul>
  • Milk
  • Eggs
  • Butter
  • Bread
<ul type=circle>
<li>Milk
<li>Eggs
<li>Butter
<li>Bread
</ul>
  • Milk
  • Eggs
  • Butter
  • Bread
<ul type=square>
<li>Milk
<li>Eggs
<li>Butter
<li>Bread
</ul>
  • Milk
  • Eggs
  • Butter
  • Bread
 

Definition Lists:

Definition lists are not indented.  The definitions are indented beneath the terms defined. The basic form of the command structure used to generate an Definition List is:

<dl>
<dt>  (The term or short phrase to be defined goes here)
<dd>  (The data definition for the term or short phrase goes here)
</dl>

Note that the data term <dt> and the data definition <dd> list elements do not require a closing tag.  The <dd> tag always produces an indented text block.

Example:

Code Result
<dl>
<dt><b><i>Gelsimum carolinensis</i> L., Carolina Jasmine</b>
<p>
<dd>This is one of the most poisonous native American plants.  All parts, except the extremely fragrant and sweet flowers, are poisonous.  The roots are particularly dangerous.  One leaf contains sufficient toxic material to kill a horse.  The plant is popular in the South as a climbing vine used in many urban arbors where it is particularly dangerous to children, its principal victims.
<p>
<dt><b><i>Cicuta maculata</i> L., Water Hemlock</b>
<p>
<dd>Water hemlock is in the same plant family as the true hemlock used by Socrates to end his life.  It is slightly less poisonous than its European congener, but is also extremely dangerous.  The plant produces flower heads similar in appearance to Queen Anne's Lace but much sweeter in fragrance. The whole plant has a pleasant sweet aroma when bruised.  This makes it particulary dangerous to livestock and children.
</dl>
Gelsimum carolinensis L., Carolina Jasmine

This is one of the most poisonous native American plants.  All parts, except the extremely fragrant and sweet flowers, are poisonous.  The roots are particularly dangerous.  One leaf contains sufficient toxic material to kill a horse.  The plant is popular in the South as a climbing vine used in many urban arbors where it is particularly dangerous to children, its principal victims.

Cicuta maculata L., Water Hemlock

Water hemlock is in the same plant family as the true hemlock used by Socrates to end his life.  It is slightly less poisonous than its European congener, but is also extremely dangerous.  The plant produces flower heads similar in appearance to Queen Anne's Lace but much sweeter in fragrance. The whole plant has a pleasant sweet aroma when bruised.  This makes it particulary dangerous to livestock and children.
 

Nesting Lists within Lists:

Note that it is possible to nest a list within another list.  It is also possible to mix the types of lists which will be nested within one another.  See the example below:

Code Result 
Shopping List:<hr>
<ol>
  <li>Fruit
    <ul>
      <li>Apples
      <li>Pears
      <li>Oranges
    </ul>
  <li>Vegetables
    <ul>
      <li>Celery
      <li>Lettuce
      <li>Carrots
    </ul>
  <li>Snacks
    <ul>
      <li>Potato Chips
      <li>Tootsie Rolls
      <li>Gummy Bears
    </ul>
</ol>
Shopping List:
  1. Fruit
    • Apples
    • Pears
    • Oranges
  2. Vegetables
    • Celery
    • Lettuce
    • Carrots
  3. Snacks
    • Potato Chips
    • Tootsie Rolls
    • Gummy Bears

Using nested lists is an excellent way of generating an outline format using HTML:

Code Result 
Gryphons:<hr>
<ol type="I">
  <li>Beaked.
    <ol type="A">
      <li>Ambiguous.
      <li>Friendly.
        <ol>
          <li>Benevolent.
          <li>Inviting.
            <ol type="a">
              <li>Talkative.
              <li>Flirtatious.
              <li>Jocular.
            </ol>
          <li>Charming.
        </ol>
      <li>Menacing.
    </ol>
  <li>Clawed.
    <ol type="A">
      <li>Three-Toed.
        <ol>
          <li>Lesser.
          <li>Greater.
        </ol>
      <li>Two-Toed.
    </ol>
  <li>Forked-Tongued.
    <ol type="A">
      <li>Red.
      <li>Orange.
      <li>Blue.
    </ol>
</ol>
 Gryphons:
  1. Beaked.
    1. Ambiguous.
    2. Friendly.
      1. Benevolent.
      2. Inviting.
        1. Talkative.
        2. Flirtatious.
        3. Jocular.
      3. Charming.
    3. Menacing.
  2. Clawed.
    1. Three-Toed.
      1. Lesser.
      2. Greater.
    2. Two-Toed.
  3. Forked-Tongued.
    1. Red.
    2. Orange.
    3. Blue.
Note that indentation is preserved within the nested lists.  Also note that the code has been indented to make divisions within the complex nested lists easier to follow and that it parallels the indents produced by the code, itself.
 

Alternatives to Lists:

Sometimes it is either inconvenient or undesirable for a list to be indented.  When this is the case it is not possible to use the unordered or ordered list tags without some difficulty in creating the proper alignment.  You might consider the following alternative means of creating perfectly aligned and legible lists:

 
A list enclosed in a table:

Code Result 
Nursery Rhymes:<hr>
<table width=100% border=0>
  <tr>
    <td width=10% align=left 
    valign=top>
      1.
    </td>
    <td width=90% align=left 
    valign=top>
      Little Boy Blue
    </td>
  </tr>
  <tr>
    <td width=10% align=left 
    valign=top>
      2.
    </td>
    <td width=90% align=left 
    valign=top>
      Little Miss Muffett
    </td>
  </tr>
  <tr>
    <td width=10% align=left 
    valign=top>
      3.
    </td>
    <td width=90% align=left 
    valign=top>
      Simple Simon
    </td>
  </tr>
</table>
 Nursery Rhymes:
1. Little Boy Blue
2. Little Miss Muffett
3. Simple Simon

Note that there is no indentation in the resulting list as shown above.  This is a very time-consuming alternative to simple ordered or unordered lists but can be used to eliminate list indentation.

See the section on TABLES.

 
A list using images as bullets:

Code Result 
Nursery Rhymes:<hr>
<img src="../graphics/dot1.gif" 
align=absbottom>&nbsp; 
Little Boy Blue<br>
<img src="../graphics/dot2.gif" 
align=absbottom>&nbsp; 
Little Miss Muffett<br>
<img src="../graphics/dot3.gif" 
align=absbottom>&nbsp; 
Simple Simon<br>
 Nursery Rhymes:
  Little Boy Blue
  Little Miss Muffett
  Simple Simon

Note that there is no indentation in the resulting list as shown above.

See the section on PLACING IMAGES.

 

A list using literal bullets or other special characters:

Code Result 
Nursery Rhymes:<hr>
&#0149;&nbsp; Little Boy 
    Blue<br>
&#0149;&nbsp; Little Miss 
    Muffett<br>
&#0149;&nbsp; Simple 
    Simon<br>
 Nursery Rhymes:
•  Little Boy Blue
•  Little Miss Muffett
•  Simple Simon

Note that there is no indentation in the resulting list as shown above.

See the section on SPECIAL CHARACTERS.

List Types: Ordered
(Numbers/Letters) 		Unordered
(Bullets) 		Definition
(Hierarchical)
List Tricks: Nesting Lists
within Lists 		Alternatives
to Lists

  Font Functions Anchors & Links   Course Contents  
You are here:  NetStrider   »   Tutorials   »   HTML   »   LISTS   «