Lists

Lists are important in HTML. It is a well-known fact that people find it easier to read on paper than on the screen. Some web pages are full of text, and people will often want to print them to read them. However there will always be many pages whose point is to help people find their way around, and for these pages you do not want to put unnecessary words. It's a bit like slides in a presentation - no-one who knows anything about presentations (in their right mind) writes blocks of text for the audience to read.

Lists help by

• making the main points stand out clearly
• making the page easily scannable
• reducing the number of words needed.

The list types

Ordered lists

These lists are to use when the list of items has a sequence that matters.

1. You put the tag <ol> at the beginning of the list
2. You put </ol> at the end
3. You put the tag <li> before each item
4. Lines are automatically numbered from 1 upwards
5. The </li> tag is necessary at the end of the item to comply with XHTML standards.

Unordered lists

This is the list to use with a collection of points in no strict order.

• The list tags are <ul> and </ul>
• The tags for each item are <li> and </li> as before
• A bullet (or other) character is automatically put at the beginning of each line.

Definition lists

This more complex list is used when each item is introduced by a word or phrase. This is itself an example of a definition list.

List tags

At the beginning of the list you put <dl> and you put </dl> at the end.

The terms do be defined

Each term is displayed on a line by itself, aligned left. The tags you put in are <dt> at the beginning and </dt> at the end

The definition

The other part of the item (the definition) is indented. The tags you put in are <dd> at the beginning and </dd> at the end

The end tags

The tags </dt> and </dd> are necessary to comply with XHTML standards, though they have been widely omitted in many earlier HTML pages.

Nesting lists and types of list

• You can nest lists quite deeply.
• Each nested list will be indented.
• For unordered lists, the bullet character may differ.
• Nesting that works (that is, looks OK):
  1. An unordered list in another unordered one.
  2. An ordered list in an unordered one.
  3. An unordered list in an ordered one.
• It doesn't look so good if you nest plain numbered ordered lists, but you can use type= in the list tag. Types include
  1. letters - type="a" or type="A"
  2. roman numerals - type="i" or type="I"

Layout of lists in the page source

How you actually write the HTML also makes a difference (to you, not to the browser).

1. Look at the HTML page source layout used in the source here.
2. I like to lay out list tags so that
   1. all the related ones are aligned,
   2. tags for sub-lists are indended.
3. Adapt this layout to suit yourself.
4. If you do it well, you will be able to keep track of nested lists. If not, you won't be able to understand the lists you have written without seeing them displayed on a browser.

Points to remember:

• Use lists simply at first. This page is contrived mainly to demonstrate the techniques.
• Be careful when nesting lists.
  • Take care with the displayed effect.
  • Take care with the page source layout.
• Used carefully, lists are effective. Enjoy!