Lists

Lists could almost have been included in the previous chapter on Layout Controls, but I decided to give them a chapter to themselves. You may find you need to present information in the form of a list and the good news is HTML caters for three different types, all very easy to set up. The three types are: Unordered, Ordered and Definition Lists.

Unordered Lists
This is the most simple of lists, with a bullet mark alongside the item. We start with the Unordered List tag <UL> then, for each item in the list, we use the List <L> ... </LI> tags. When all the items to be included in the List are written, we finish off, of course, with the </UL> tag.
There are three different shape bullets available, depending on your browser's acceptance of them, Disc, Circle and Square, each of which is set with the Type command. Put this Type command in with the <UL> tag and it will set the bullet shape for the whole List (unless there is a command to change the type further down). Include it in the <LI> tag and it will affect that one and subsequent ones until another Type command is encountered. Here is an example:

<UL TYPE="SQUARE">
<LI>The first item in the list</LI>
<LI TYPE="DISC">The second item in the list</LI>
<LI>The third item in the list</LI>
<LI TYPE="CIRCLE">The fourth item in the list</LI>
<LI>And the last item in the list</LI>
</UL>

Ordered Lists
An ordered list gives the opportunity to give each each item in the list a unique identifier. The creation of an Ordered List is basically the same as for an Unordered List, but with the <OL> ... </OL> tags instead of <UL> ... </UL>. Here, as before, we have a choice of identifiers though this time they are either Upper <TYPE="A"> or Lower <TYPE="a"> Case letters, Upper <TYPE="I"> or Lower <TYPE="i"> Case Roman numerals or standard numbers <TYPE="1">. This last is not really needed as it is the default. In addition, you can set the starting point with the Start command. Once again, not all browsers will recognise these commands. Here are some examples:

<OL TYPE="i"
<LI>First item</LI>
<LI>Second item</LI>
<LI>Third item</LI>
<LI>Fourth item</LI>
<LI>Fifth item</LI>
</OL>

  1. First item
  2. Second item
  3. Third item
  4. Fourth item
  5. Fifth item

<OL TYPE="A"
<LI>First item</LI>
<LI>Second item</LI>
<LI>Third item</LI>
<LI>Fourth item</LI>
<LI>Fifth item</LI>
</OL>

  1. First item
  2. Second item
  3. Third item
  4. Fourth item
  5. Fifth item

<OL TYPE="1" START="21"
<LI>First item</LI>
<LI>Second item</LI>
<LI>Third item</LI>
<LI>Fourth item</LI>
<LI>Fifth item</LI>
</OL>

  1. First item
  2. Second item
  3. Third item
  4. Fourth item
  5. Fifth item

If you cannot see the lists as they are supposed to be, then that is because your browser does not support this funtion.

Definition Lists
This style of list allows you to present definition of terms. Rather than just single List <LI> items, here we have terms <DT> and their definitions <DD>. To start the list we have, surprise, surprise, the <DL> tag!

<DL>
<DT>The first item in the list.</DT>
<DD>The definition of the first item</DD>
<DT>The second item in the list.</DT>
<DD>The definition of the second item</DD>
<DT>The third item in the list.</DT>
<DD>The definition of the third item</DD>
</DL>

The first item in the list.
The definition of the first item
The second item in the list.
The definition of the second item
The third item in the list.
The definition of the third item

Nesting
A list can be nested inside another but you must remember to close your lists in the opposite order from which you started them otherwise you will end up with one hell of a mess on the screen!