HTML Help & Resources
Ordered and Unordered Lists
Lists can be displayed in several different point-by-point forms, using numbers, letters, roman numerals, bullets, or images. Lists can also be nested inside one another and house block-level elements, like the TABLE tag, for instance
Using style, you can also achieve various display formats, that can significantly impact the look of a document.
The elements of style, and how to use them, are not covered in this reference. For more information on how to utilize the power of cascadding style, visit our CSS reference instead.
Ordered Lists
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
... META DATA ...
</HEAD>
<BODY>
<!-- List below will order items alphabetically -->
<OL TYPE=a>
<LI>List Item #1</LI><!-- starts with a -->
<LI>List Item #2</LI>
</OL>
<!-- List below will order items numerically -->
<OL START=3>
<LI>List Item #1</LI><!-- starts with 3 -->
<LI>List Item #2</LI>
</OL>
</BODY>
</HTML>
Note that the LI tag does not require a closing tag ( /LI ). However, some browsers may display lists incorrectly, and attribute certain style characteristics to subsequent lists, or subsequent nested lists. Best to always include a closing LI tag.
Omitting the “type” in an ordered list will default to a numeric order starting at 1.
Using the “start” property, you can define where the list begins in sequence.
Uppercase and lowercase letters, and roman numerals, can be achieved by defining the attribute in the TYPE. For example, TYPE=a and TYPE=A.
Unordered Lists
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
... META DATA ...
</HEAD>
<BODY>
<!-- List below produces a bullet list -->
<UL>
<LI>List Item #1</LI><!-- starts with filled disc -->
<LI>List Item #2</LI>
</UL>
<!-- List below produces a square bullet list -->
<UL TYPE=square>
<LI>List Item #1</LI><!-- starts with filled square -->
<LI>List Item #2</LI>
</UL>
</BODY>
</HTML>
TYPE values can be circle, disc, or square. However, style allows for better graphical defintions, where it is possible to substitute an image for the circle, disc, or square.
Move on to the Next Topic - Tables.