Writing@CSU

Writing Guides

Writing for the Web
 
Writing@CSU Home Page | Writing Guides | Writing Web Sites

Creating Lists

Readers of Web documents typically want to locate information quickly and efficiently. As a result, lists are used extensively in Web documents. In this guide, we will focus on three types of lists: (1) ordered lists, which present information in sequence using numbers or letters, (2) unordered lists, which present information using bullets, and (3) compound lists, which present information using a combination of ordered and/or unordered lists.

Ordered Lists

An ordered list can use Arabic numerals, Roman numerals, or letters to present information in a sequence. The key elements of an ordered list are the <OL> tag (and it's closing tag, </OL>) and the <LI> tag (and its closing tag, </LI>). Note that browsers do not require you to close the <LI>. However, you must close the <OL> tag.

A typical ordered list might be coded like this:

<OL>

     <LI>First item in the list.</LI>

     <LI>Second item in the list.</LI>

     <LI>Third item in the list.</LI>

     <LI>Fourth item in the list.</LI>

     <LI>Fifth item in the list.</LI>

</OL>
The list would appear like this:
  1. First item in the list.
  2. Second item in the list.
  3. Third item in the list.
  4. Fourth item in the list.
  5. Fifth item in the list.

The default values for an ordered list are Arabic numerals starting with 1. However, you can use two attributes to modify an ordered list: TYPE and START. TYPE allows you to specify the type of ordered list you want to use, e.g., a numerical list, an alphabetical list. The options for TYPE are:

A Capital letters. e.g. A, B, C ...

a Small letters. e.g. a, b, c ...

I Large roman numerals. e.g. I, II, III ...

i Small roman numerals. e.g. i, ii, iii ...

1 Arabic numerals. e.g. 1, 2, 3 ...

START allows you to tell the list which number or letter to start at. The value of START is always numerical; depending on the value of the TYPE attribute, the list will start at a letter or number. For instance, START="3" will start a list at C, c, III, iii, or 3, respectively, depending on the value of TYPE (see values above). Consider the following examples:

Example 1: Ordered List with Capital Roman Numerals Beginning with 4 (IV)

<OL TYPE="I" START="4">

<LI>First item in the list.</LI>

<LI>Second item in the list.</LI>

<LI>Third item in the list.</LI>

<LI>Fourth item in the list.</LI>

<LI>Fifth item in the list.</LI>

</OL>

The list would appear like this:

  1. First item in the list.
  2. Second item in the list.
  3. Third item in the list.
  4. Fourth item in the list.
  5. Fifth item in the list.

Example 2: Ordered List with Lower Case Letters Beginning with 7 (g)

<OL TYPE="a" START="7">


<LI>First item in the list.</LI>


<LI>Second item in the list.</LI>


<LI>Third item in the list.</LI>


<LI>Fourth item in the list.</LI>


<LI>Fifth item in the list.</LI>
</OL>

The list would appear like this:

  1. First item in the list.
  2. Second item in the list.
  3. Third item in the list.
  4. Fourth item in the list.
  5. Fifth item in the list.

Unordered Lists

An unordered list uses bullets to present information in a sequence. The key elements of an unordered list are the <UL> tag (and it's closing tag, </UL>) and the <LI> tag (and its closing tag, </LI>). Note that browsers do not require you to close the <LI> – although you certainly can. However, you must close the <UL> tag.

A typical unordered list might be coded like this:

<UL>

<LI>First item in the list.</LI>

<LI>Second item in the list.</LI>

<LI>Third item in the list.</LI>

<LI>Fourth item in the list.</LI>

<LI>Fifth item in the list.</LI>

</UL>
The list would appear like this:
  • First item in the list.
  • Second item in the list.
  • Third item in the list.
  • Fourth item in the list.
  • Fifth item in the list.

The default bullet symbol for an unordered list are a solid round bullet. However, Netscape supports an additional attribute, TYPE, which allows you to modify an unordered list so that a different symbol appears. (The TYPE attribute is not supported by Internet Explorer.) The options for TYPE are DISC, CIRCLE, and SQUARE. Consider the following examples:

Example 1: Unordered List with TYPE="DISC"

<UL TYPE="DISC">

<LI>First item in the list.</LI>

<LI>Second item in the list.</LI>

<LI>Third item in the list.</LI>

<LI>Fourth item in the list.</LI>

<LI>Fifth item in the list.</LI>

</UL>

The list would appear like this:

  • First item in the list.
  • Second item in the list.
  • Third item in the list.
  • Fourth item in the list.
  • Fifth item in the list.

Example 2: Unordered List with TYPE="CIRCLE"

<UL TYPE="CIRCLE">

<LI>First item in the list.</LI>

<LI>Second item in the list.</LI>

<LI>Third item in the list.</LI>

<LI>Fourth item in the list.</LI>

<LI>Fifth item in the list.</LI>

</UL>

The list would appear like this:

  • First item in the list.
  • Second item in the list.
  • Third item in the list.
  • Fourth item in the list.
  • Fifth item in the list.

Example 3: Unordered List with TYPE="SQUARE"

<UL TYPE="SQUARE">

<LI>First item in the list.</LI>

<LI>Second item in the list.</LI>

<LI>Third item in the list.</LI>

<LI>Fourth item in the list.</LI>

<LI>Fifth item in the list.</LI>

</UL>

The list would appear like this:

  • First item in the list.
  • Second item in the list.
  • Third item in the list.
  • Fourth item in the list.
  • Fifth item in the list.

Compound Lists

Compound lists are, quite simply, lists that are made up of multiple lists. An outline might be a good example of a compound list. Compound lists can be created because you can "nest" lists – that is, you can start a new list before you finish the first one. Consider this relatively simple example:

<OL>

   <LI>First item in the main list.</LI>

      <UL>

         <LI>First item in the first sublist.</LI>

         <LI>Second item in the first sublist.</LI>

      </UL>

   <LI>Second item in the list.</LI>

   <LI>Third item in the list.</LI>

   <LI>Fourth item in the list.</LI>

      <UL>

         <LI>First item in the second sublist.</LI>

         <LI>Second item in the second sublist.</LI>

      </UL>

   <LI>Fifth item in the list.</LI>

</OL>

The list would appear like this:

  1. First item in the list.
    • First item in the first sublist.
    • Second item in the first sublist.
  2. Second item in the list.
  3. Third item in the list.
  4. Fourth item in the list.
    • First item in the second sublist.
    • Second item in the second sublist.
  5. Fifth item in the list.

Ordered and unordered lists can be nested in virtually limitless ways. You should take extra care when creating compound lists, however, since it is quite easy to neglect to close an <OL> or <UL> tag.

See Also
Links Page: Learn more about HTML on the HTML links page.

Copyright © 1993-2009 Colorado State University and/or this site's authors, developers, and contributors. Some material displayed on this site is used with permission.