How To Make Links
List Tutorial
 

Lists in HTML perform the same function as they do anywhere else. They help you organize information and make it easier to read. I use unordered lists throughout this site. You can use whatever you like. This document will show you how.

There are three types of lists, ordered, unordered, definition lists. Ordered lists are organized using numerals of some type. Unordered lists are organized a type of bullets. Definition lists are formatted to define terms like a dictionary. We'll discuss ordered and unordered first. Here's an example of what they both look like.

Ordered:

  1. Item 1
  2. Item 2
  3. Item 3

Unordered:

  • Item 1
  • Item 2
  • Item 3

The basic formatting of the list is the same for both types.

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

The only differences are the values of the attributes used for the <ol> and <ul> tags.

start=
Specifies that the list should start at a number or value other than one. The default is one. This is not used with ul as there are no numbers used.

<ol start=3>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

  1. Item 1
  2. Item 2
  3. Item 3
type=
Specifies the type of number or bullet used in the list. Values are as follows: type=1, the default. Numbers appear as 1, 2, 3, etc. Type=A, the order is A, B, C, etc. Type=a, the order is a, b, c, etc. Type=I, order is I, II, III, IV, etc. Type=i, order is i, ii, iii, etc. Using the start attribute with type= will make the list start on the appropriate value. These types are for ordered lists. The use of the type= attribute of the unordered list is only supported by Netscape. The values are disc, square, and circle. Disc and circle look the same.

Ordered:
<ol type=I>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

  1. Item 1
  2. Item 2
  3. Item 3

Unordered:
<ul type=square>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

  • Item 1
  • Item 2
  • Item 3

That's it for ordered and unordered lists. On to definition lists.

 

Definition lists are a little different. They don't use the <li> tag at all. They use three unique tags. They are: <dl>, starts or ends the list, <dt>, lists the term to be defined (Definition Term), and <dd> defines the term (Definition Definition). Example:

<dl>
<dt>cyberphobia</dt>
<dd>An exaggerated and irrational fear of computers.</dd>
<dt>cyberspace</dt>
<dd>The virtual space created by computer systems.</dd>
</dl>

cyberphobia
An exaggerated and irrational fear of computers.
cyberspace
The virtual space created by computer systems.

(Definitions courtesy of QUE'S Computer & Internet Dictionary, Bryan Pfaffenberger. 1995, Que Corporation.)

 

That's all there is to lists. Good luck with all your lists you list.

Created & Managed With Microsoft Frontpage 98 Best experienced with Mirosoft Internet Explorer Counter by Webcounter
Web Tracker Designed with Derekware HTML Author. Free Speech NOW!

1996-1999 Gilpo All rights reserved. This document may not be altered in anyway or distributed without the expressed written consent of Gilpo. All information contained herein is deemed to be accurate but is not warranted.