Dr. John's

Eazy-Peazy Guide to HTML

by John F. Barber  

Lists

Lists can effectively order and display information in your WWW documents.

There are two kinds of lists you can use to format and display your text:
  1. Unordered Lists
    List items are not numbered, and show no relative ranking other than top to bottom.
  2. Ordered Lists
    List items are identified by a number, letter, or Roman numeral which can show relative ranking. You can define the identification style you want.

Lists: How They Work
UNORDERED LISTS
Unordered Lists items are not numbered, and show no relative ranking other than top to bottom. Use the <ul> start and </ul> end tags (ul=Unordered List) to define the start and end of your list.

<ul> * * * </ul>

Use the <li> start and </li> end tags to surround each item in your list.

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

Put these elements together as shown below to create an Unordered List.
Note: The text of each item in your list can be as long as you like. Short examples are used here only for illustrative purposes.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Appearance in your WWW document:
  • Item 1
  • Item 2
  • Item 3
Unordered lists can be customized.
See Customizing Bullet Points for more information.
ORDERED LISTS
Each item in an Ordered List is identified by a number, letter, or Roman numeral which can show relative ranking of the list items. Use the <ol> start and </ol> end tags (ol=Ordered List) to define the start and end your list.

<ol>   </ol>

Use the <li> start and </li> end tags to surround each item in your list.

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

Put these elements together as shown below to create an Ordered List. Note: The text of each item in your list can be as long as you like. Short examples are used here only for illustrative purposes.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Appearance in your WWW document:
  1. Item 1
  2. Item 2
  3. Item 3
Ordered lists can be customized.
See Customizing Ordered Lists for more information.
CUSTOMIZING ORDERED LISTS
The default display for items in an Ordered List is numbers (1, 2, 3, etc.) as shown above, and below.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Appearance in your WWW document:
  1. Item 1
  2. Item 2
  3. Item 3
But, by using the type attribute inside the <ol> start tag, you can specify other types of ordering sequences. In addition to the default numbers, the type attribute allows you to define capital letters, lowercase letters, large Roman numerals, and small Roman numerals to appear in front of each item in your Ordered List. See below for more information about each.

Capital Letters
To have capital letters beginning with "A" and continuing on appear in front of each item in your Ordered List use the "type=A" attribute inside the <ol> start tag. Note the formatting for this attribute below. You should enclose the type designation (A) in quote marks as shown.
<ol type="A">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Appearance in your WWW document:
  1. Item 1
  2. Item 2
  3. Item 3
Lowercase Letters
To have lowercase letters beginning with "a" and continuing on appear in front of each item in your Ordered List use the "type=a" attribute inside the <ol> start tag. Note the formatting for this attribute below. You should enclose the type designation (a) in quote marks as shown.
<ol type="a">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Appearance in your WWW document:
  1. Item 1
  2. Item 2
  3. Item 3
Large Roman Numerals
To have large Roman numerals beginning with "I" and continuing on appear in front of each item in your Ordered List use the "type=I" attribute inside the <ol> start tag. Note the formatting for this attribute below. You should enclose the type designation (I) in quote marks as shown.
<ol type="I">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Appearance in your WWW document:
  1. Item 1
  2. Item 2
  3. Item 3
Small Roman Numerals
To have small Roman numerals beginning with "i" and continuing on appear in front of each item in your Ordered List use the "type=i" attribute inside the <ol> start tag. Note the formatting for this attribute below. You should enclose the type designation (i) in quote marks as shown.
<ol type="i">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Appearance in your WWW document:
  1. Item 1
  2. Item 2
  3. Item 3
CUSTOMIZING BULLET POINTS
The default display for items in an Unordered List is a "bullet point," a small solid black filled circle, or disc, in front of each list item as shown above, and below.
Appearance in your WWW document:
  • <= "bullet point"
  • <= another
  • <= Yet another
But, by using the TYPE attribute inside the List start tag (<li>), you can specify other types of bullet points. There are three types of bullet points you can define:
  • Filled Circles
  • Unfilled Circles
  • Squares

The Filled Circle is the default and if you do not specify another bullet point type this is what you will get. But, to use either of the other two bullet points you simply use the TYPE attribute inside the <li> tag to specify whether you want Unfilled Circles or Squares to appear before each item in your Unordered List. See below for more information on each.

Unfilled Circles
To have small Unfilled Circles appear in front of each item in your Unordered List use the "type=circle" attribute inside the <ul> start tag. Note the formatting for this attribute below. You should enclose the type designation (circle) in quote marks as shown.
<ul type="circle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Appearance in your WWW document:
  • Item 1
  • Item 2
  • Item 3
Squares
To have small Squares appear in front of each item in your Unordered List use the "type=square" attribute inside the <ul> start tag. Note the formatting for this attribute below. You should enclose the type designation (square) in quote marks as shown.
<ul type="square">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Appearance in your WWW document:
  • Item 1
  • Item 2
  • Item 3