Lists

Html provides three types of lists, unordered, ordered, and definition lists. The first two types are almost the same.

Unordered Lists

Unordered lists have bullets in front of each item. Their structure is simple:

• The entire list is enclosed between <ul> and </ul> tags.
• Each list item is introduced with the <li> tag. The </li> tag is optional.

You can change what the bullet looks like, by using the type attribute of the <ul> tag. It can be "disc", "circle", or "square". The default value is "disc".

<ul type="circle">
  <li> bluebirds 
  <li> cardinals 
  <li> robins 
</ul>

Ordered Lists

Ordered lists are very much like unordered lists. Instead of bullets, they have numbers or letters.

• The entire list is enclosed between <ol> and </ol> tags.
• Each list item is introduced with the <li> tag. The </li> tag is optional.

The type attribute of the <ol> tag can have values of "1", "A", "a", "I" and "i". The default is "1", which produces arabic enumeration, 1. 2. 3 ...

Lists can be nested by placing a list inside a list item, as is shown in the following code.

<ol type="I">
 <li>Forms of Matter
  <ol type="A">
   <li>Neutrons 
   <li>Electrons 
   <li>Protons 
  </ol>
 <li>Forms of Energy
  <ol type="A">
   <li>Nuclear 
   <li>Chemical 
   <li>Heat 
   <li>Mechanical 
   <li>Electromagnetic 
   <li>Gravitational 
  </ol>
</ol>

Definition Lists

Definition lists are designed to hold a list of terms, together with their definitions.

• Definition lists are enclosed between <dl> and </dl> tags.
• There are two kinds of list items:
  • Each term is introduced by a <dt> tag. The </dt> tag is optional.
  • Each definition is introduced by a <dd> tag. The </dd> tag is optional.

<dl>
 <dt>metal     <dd> a hard, shiny, ductile 
      substance, which conducts heat and 
      electricity well.
 <dt>nonmetal  <dd>a usually dull, often 
      brittle material, which conducts heat 
      and electricity poorly.
 <dt>metalloid <dd>an element with properties 
      intermediate between the metals and 
      nonmetals.
</dl>

This list would be more readable if the <dt> terms were made bold. This can be accomplished once and for all, by placing the following CSS code within the style sheet. This will be discussed in the section on CSS styling.

  dt{font-weight:bold}

Giving the list a caption and enclosing it in a box further improves its appearance. This is shown in the section on Classes.

Copyright 2006 by Nancy E. Knox