Tell a friend about this site

Home Page

Next Page

Previous Page

Contents Page


Download tutorial in Zip form







When your first web page is up on the World Wide Web, why not apply for our Good Start Award?

TaFWeb Good Start Award

How To Make Lists

HTML recognises several different types of list. The code below makes probably the simplest kind of list, the unordered list.

<UL>
   <LI>Peas</LI>
   <LI>Beans</LI>
   <LI>Carrots</LI>
</UL>        Example

The <UL>...</UL> tags mark the beginning and end of the list, while each item in the list is surrounded by a <LI>...</LI> tag pair. For the majority of browsers the closing </LI> tag is not really necessary, but is specified in the official HTML specification. Notice that we don't need a <BR> linebreak tag at the end of each item -- this is implied in the <LI> tag.

The code shown above will place a bullet point in front of each list item (normally a large dot). In some browsers you can specify different bullet points by extending the <UL> tag like this:

<UL TYPE=CIRCLE> or <UL TYPE=SQUARE>

If you want your list to be numbered or lettered, then you can use an ordered list. The coding is very similar to the unordered list:

<OL>
   <LI>Peas</LI>
   <LI>Beans</LI>
   <LI>Carrots</LI>
</OL>        Example

The code used above will number the list items 1, 2, 3 etc. As with the <UL> tag, we can extend the opening tag and thereby specify other numbering or lettering:

<OL TYPE="1">Numbers the list items (not really needed as this is the default)
<OL TYPE="i">Uses small roman numerals, i, ii, iii etc.
<OL TYPE="I">Uses large roman numerals, I, II, III etc.
<OL TYPE="a">Uses small letters, a, b, c etc.
<OL TYPE="A">Uses capital letters, A, B, C etc.

We can also specify where the numbering or lettering should start from. For example, if we want a numbered list starting with 4, we could use this code:

<OL TYPE="1" START=4>

A different type of list is the definition list. Each item in the list consists of two parts, the definition term and the definition data:

<DL>
   <DT>Unordered list</DT>
      <DD>A list arranged in no particular order.</DD>
   <DT>Ordered list</DT>
      <DD>A list which is numbered or lettered.</DD>
   <DT>Definition list</DT>
      <DD>The type of list shown here.</DD>
</DL>        Example

Many web page designers use the definition list as a means of indenting text:

<DL>This text is flush with the left margin.
<DL>This is indented.
<DL>This is indented even more.</DL></DL></DL>
Example

This is not good practice -- it doesn't follow the HTML specification and is therefore not guaranteed to work!

Finally, there are two other types of lists, the menu list and the directory list. These are coded in the same way as the unordered list, except that the <UL>...</UL> tags are replaced with <MENU>...</MENU> or <DIR>...</DIR> tags. Most browsers do not distinguish between these types of lists, showing them all as if they were unordered lists.

Try making the different types of lists, and also have a look at the different ways of numbering/lettering and ordered list. When you're ready, go on to the next section about Creating a Form.

rule


Top of Page


This page hosted by
Planet Tripod
Get your own
Free Home Page

 

These pages are copyright © Terry Franks June 2003.
Terry Franks
Last major revision: 22 August 1998 at 02:29 BST
This document URL: https://members.tripod.com/~terry_franks/webintro11.html
TerryFranks is
a member of

The HTML Writers Guild