The Joy of HTML


How to make Lists

You can use HTML to make ordered or unordered lists. It's an easy and convenient way to organize information in a pleasent looking format. Great for any kind of list or presenting hierarchical information

The Three Types of Lists
The Ordered List
Ordered lists have a number or letter in front of each line or item. The ordered list starts with <OL> and ends with </OL>. Each ordered line or item starts with <LI>. There is no closing tag for <LI>. Numbers, or any of the other ordering options shown in the next table, will display automatically and the entire list will be indented in relationship to the rest of the web page it is used on.
The HTML Code Some text here before the ordered list.
<OL>
<LI>First ordered line.
<LI>Second ordered line.
<LI>Third ordered line.
</OL>
Some text here after the ordered list.

Go to the practice board and try the above code.

The results as viewed on a web page Some text here before the ordered list.
  1. First ordered line.
  2. Second ordered line.
  3. Third ordered line.
Some text here after the ordered list.
The Unordered List
Unordered lists have a bullet in front of each item or line. The unordered list is basically the same as the ordered list above. It starts with <UL> and ends with </UL>. The difference is that the unordered list will use bullets instead of numbers or letters. There are three different bullet styles. The different styles are shown in the next table. The unordered list will also be indented.
The HTML Code Some text here before the unordered list.
<UL>
<LI>First unordered line.
<LI>Second unordered line.
<LI>Third unordered line.
</UL>
Some text here after the unordered list.

Go to the practice board and try the above code.

The results as viewed on a web page Some text here before the unordered list.
  • First unordered line.
  • Second unordered line.
  • Third unordered line.
Sone text here after the unordered list.
The Definition list
The definition list starts with <DL> and ends with </DL>. It's supposed to be used for defining terms but it can be used for anything, especially handy for when you just need some indenting without a bullet or number like the ordered and unordered lists. Definition lists have three tags instead of two, but you can use just the <DL> and <DD> if you wanted to indent some text.
The HTML Code Some text here before the definition list.
<DL>
<DT>First term to be defined.
<DD>Definition of the first term.
<DT>Second term to be defined.
<DD>Definition of the second term.
<DT>Third term to be defined.
<DD>Definition of the third term.
</DL>
Some text here after the definition list.

Go to the practice board and try the above code.

The results as viewed on a web page Some text here before the definition list.
First term to be defined.
Definition of the first term.
Second term to be defined.
Definition of the second term.
Third term to be defined.
Definition of the third term.
Some text here after the definition list

Here's the different ordering options you can use with the ordered list.
The following TYPE attribute can be used in the <OL> and <LI> tags. The START attribute is used in the <OL> tag only.

Example 1: <OL TYPE=A START=3>

Example 2: <OL TYPE=A START=3>
<LI>First item.
                   <LI TYPE=I>Second item.

Attribute Variable Purpose
TYPE= A
a
I
i
1

DISC
SQUARE
CIRCLE

Indicates what type of character to use to order the list with. "A" is upper case letters. "a" is lower case letters. "I" is upper case Roman Numerals. "i" is lower case Roman Numerals. "1" (one) is the default value if no TYPE attribute is used, so you really don't need to use it.

If you use DISC, SQUARE or CIRCLE the START attribute is ignored and you essentially turn an ordered list (<OL>) into an unordered list (<UL>).

Attribute Variable Purpose
START= 1 to 26
(for alphabetical)

1 to ?
(for numerical)

Indicates what value to start the ordered list at. Regardless of the type of list the start value must be a number. So if you start an alphabetical list with 3 the corresponding value is the letter C or c. Same with Roman Numeral lists.

Alphabetical lists can only go up to "Z". So if you have ten items in the list but try and start at a value of 20 (T), the list will automatically backtrack to start at the sixteenth letter, "O", so it will end at the letter "Z".

Here's the different ordering options you can use with the unordered list.
The TYPE attribute is used in the <UL> tag and the VALUE attribute is only used in the <LI> tag.

Example 1: <UL TYPE=SQUARE>

Example 2: <UL TYPE=a>
                   <LI VALUE=3>

Attribute Variable Purpose
TYPE= DISC
SQUARE
CIRCLE

A
a
I
i
1

Indicates what type of symbol to use mark the list items with. DISC is the default value if no TYPE attribute is used.

You can use the "A" "a" "I" "i" "1" values in an unordered list to make an ordered list if you wanted to.

If you "nest" unordered lists and don't indicate which TYPE of symbol to use, the list will start with a DISC then the first nested list will use the CIRCLE and the next nested list the SQUARE.

Attribute Variable Purpose
START= 1 to 26
(for alphabetical)

1 to ?
(for numerical)

Indicates what value to start the list at if you use an alpha or numerical attribute for the unordred list. Works the same as described above for an ordered list. All subsequent lists will be affected if using the VALUE= attribute in the <LI> tag of an unordered list.

Quick Start
What is HTML?
Text and Fonts
Using Images
Making Links and Mailto Links
Making Lists
Tables, the key to well designed HTML documents
Examples of Tables
Color Chart by Name
Hexadecimal Color Chart

Practice board

Copyrighted 1999-2000 e-pixs.com