Lists are remarkably useful tools, in many ways. They enable you to quickly present your visitors with a range of choices, a quick collection of information, or a summary. There are two different kinds of lists, and this lesson will teach you both.

The first kind of list is an ordered list. Its beginning and ending tags are:

<ol>
</ol>
To mark the items in the list, use <li>, like this:
<ol>
<li> Item one
<li> Item two
<li> Item three
</ol>
The items will appear with numbers in front of them:
  1. Item one
  2. Item two
  3. Item three
Note that lists are automatically dropped down one line and slightly indented.

The other kind of list is an unordered list, whose tags are:

<ul>
</ul>
The <li> tag is used in the same way, but the items appear with a bullet in front of them, rather than a number, like this: You will sometimes see <menu> rather than <ul>; it does the same thing. You may use which ever one you find easiest to remember.

One handy thing about ordered lists is that they make numbering items so simple. You can move the items' order around as much as you want, but as long as the <li> tag remains in front, the numbers will be in order. Look at the coded examples below:

<ol>
<li> Item one
<li> Item two
<li> Item three
</ol>
...becomes...
  1. Item one
  2. Item two
  3. Item three
<ol>
<li> Item three
<li> Item one
<li> Item two
</ol>
...becomes...
  1. Item three
  2. Item one
  3. Item two
This feature makes it very simple to alter ordered lists after they've been created without the hassle of re-numbering everything.

Design Tip:
Use lists when you want to present a collection of links to other websites.

Problems? Questions? Send us