Learning HTML 3.2: Lists

Unordered List

The unordered list element is opened with the <UL> tag.  Then each item of the list is proceeded by a list item, <LI> tag.  The list item tag needs no corresponding closing tag, and the </UL> tag closes the unordered list.

The style of bullet can be suggested with the TYPE attribute.  There are three possible styles:
"disc" for a closed bullet (the default 1st level bullet);
"square" for an open square;
"circle" for an open bullet.
The COMPACT attribute is used to indicate that the list items are short, so the browser can render the list in a more compact manner.


<UL COMPACT>
<LI>one
<LI>two
<LI>three
</UL>


<UL TYPE=circle>
<LI>Open Circle 1st level.
  <UL TYPE=circle>
  <LI>Open Circle 2nd level.
    <UL TYPE=circle>
    <LI>Open Circle 3rd level.
    </UL>
  </UL>
</UL>

• Normal 1st level.
  • Normal 2nd level.
    • Normal 3rd level.

• one
• two
• three

• Open Circle 1st level.
  • Open Circle 2nd level.
    • Open Circle 3rd level.

Ordered List

The ordered list element marks up an ordered list of items and is opened with the <OL> tag.  Then each item of the list is proceeded by a list item, <LI> tag.  The list item tag needs no corresponding closing tag, and the </OL> tag closes the unordered list.

The appearance of the number can be controlled with the TYPE attribute:
1 - Arabic numbers (default) (1, 2, 3, 4, ...)
a - Alphanumeric, lowercase (a, b, c, d, ...)
A - Alphanumeric, uppercase (A, B, C, D, ...)
i - Roman numerals, lowercase (i, ii, iii, iv, ...)
I - Roman numerals, uppercase (I, II, III, IV, ...)
The START attribute indicates where the list should start and the COMPACT attribute indicates that the list contains only short list items, so it may be rendered in a more compact way (not widely supported).

10. Arabic numbers.
    1. Alphabet, lowercase.
    2. Alphabet, lowercase.
    3. Alphabet, lowercase.
11. Arabic numbers.
    1. Roman numerals, uppercase.
    2. Roman numerals, uppercase.
    3. Roman numerals, uppercase.
12. Arabic numbers.
    1. one
    2. two
    3. three

Definition List

Used to provide a list of items with associated definitions.  <DL> starts the list and </DL> ends it.  Every item should be put in a Definition Term, <DT>, and its definition goes in the <DD> directly following it.  The definition list is typically rendered without bullets of any kind.  The COMPACT attribute is used to indicate that the list items are short, so the browser can render the list in a more compact manner.

<DL>
  <DT>Tag
  <DD>Tags instruct the web browser how to display the text that you've written.
</DL>

See the Glossary for an example of a Definition List.

Horizontal Rule

Not a list element but the last Block Formatting element we'll learn.  A horizontal rule (just above the text "Horizontal Rule"), <HR>, is typically used to separate sections within a document.  The horizontal position can use the ALIGN attribute you've already learned about.  You may specify the thickness of the rule with the SIZE attribute (in pixels) and the width of the rule with the WIDTH attribute which can be specified in either pixels or as a percentage of the currently available window width.  The NOSHADE attribute is used to indicate that the rule should be drawn as a thick line instead of it's normal shading.

<HR>

<HR SIZE=10 NOSHADE>

<HR WIDTH="50%">

In the next chapter we'll tackle Hyperlinks and embedding Images in the page. This is the good part!