Html provides three types of lists, unordered, ordered, and definition lists. The first two types are almost the same.
Unordered lists have bullets in front of each item. Their structure is simple:
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 are very much like unordered lists. Instead of bullets, they have numbers or letters.
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 are designed to hold a list of terms, together with their definitions.
<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.
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