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:To mark the items in the list, use<ol>
</ol><li>
, like this:The items will appear with numbers in front of them:<ol>
<li> Item one
<li> Item two
<li> Item three
</ol>Note that lists are automatically dropped down one line and slightly indented.
- Item one
- Item two
- Item three
The other kind of list is an
unordered list
, whose tags are:The<ul>
</ul><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
- Item one
- Item two
- Item three
<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:This feature makes it very simple to alter ordered lists after they've been created without the hassle of re-numbering everything.
<ol>
<li> Item one
<li> Item two
<li> Item three
</ol>...becomes...
- Item one
- Item two
- Item three
<ol>
<li> Item three
<li> Item one
<li> Item two
</ol>...becomes...
- Item three
- Item one
- Item two
Design Tip:
Use lists when you want to present a collection of links to other websites.