CSc 050: Lists

If you wish to list a number of items in a web page, the easiest way to make it look nice is to use one of HTML's list tags. These tags take care of labeling and spacing for you. The table below lists the different tags, showing what they do and the HTML to use.

List name Tag used What it does Example HTML Looks like this Notes
Unordered <ul> Bulleted list <ul>
<li>red</li>
<li>blue</li>
</ul>
  • red
  • blue
 <li> tag used
for each
list item
Ordered <ol> Numbered list <ol>
<li>red</li>
<li>blue</li>
</ol>
  1. red
  2. blue
Definition <dl> Lists a term and
then puts a
description on
the next line
indented		 <dl>
<dt>red</dt>
<dd>apple color</dd>
<dt>blue</dt>
<dd>sky color</dd>
</dl>
red
apple color
blue
sky color
 use <dt> for
defn term

use <dd> for
defn description

At this point, you're ready to use lists in your own pages. Continue reading if you wish to learn about some of the fancier options available with lists.

List Options

HTML provides a few more options to give you more control over your lists. The table below lists the main ones.

Option Used with
which lists		 Syntax
Choices		 Example HTML Looks like this Notes
Specify
bullet type		 Unordered type=disc

type=circle

type=square

 <UL type=circle>
<LI> red
<LI> blue
</UL>
  • red
  • blue
 Can use inside
<LI> tag too for
individual list
items
Number list
with Roman
numerals
or letters		 Ordered type=A
type=a
type=I
type=i		 <OL type=I>
<LI> red
<LI> blue
</OL>
  1. red
  2. blue
 Can use inside
<LI> tag too for
individual list
items
Number list
starting at
a number
you specify		 Ordered start=? <OL start=5>
<LI> red
<LI> blue
</OL>
  1. red
  2. blue
 Use value=?
inside <LI> tag
for individual
list items

Back to Tutorial Index