This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

HTML Coding

Basics of Web Publishing: List Basics

Note: The HTML pages are out-of-date and will not be updated.

Lists are helpful for organizing information to increase the readability and add white space to your page. HTML provides codes for unordered lists with bullets, ordered lists with numbers ( 1,2,3 ), and definition lists for multi-line entries, such as a glossary. If you want you can embed more than one list.

Lists have three components:

  1. the code to mark the beginning of the list
  2. the code for each item in the list (adding the bullet or the number)
  3. the code marking the end of the list

In addition to having bullets or numbers before the list, the list options automatically align the text of multi-line items to help increase readability. The following examples illustrate the alignment of the text without using the list option and with the list option.

Without the list code:

With the list code:

return to topUnordered Lists

The unordered list is helpful for listing related information that doesn't have a specific order. The basic list provides bullets (round dots) before each item. You have the option of substituting squares for the bullets.

NOTE: The actual shape of the bullet is dependent on the that the user has selected for his/her browser. For example, Times Roman displays the standard bullets as a circle but Arial displays it as a square. Also, bullets do not always print properly. We have seen the bullets either left out completely or substituted with an empty box.

Basic Unordered List Example

Example The Code
  • Item One
  • Item Two
  • Item Three
<UL>
<LI>Item One
<LI>Item Two
<LI>Item Three

</UL>

Custom Unordered Lists

Example The Code
  • Item One
  • Item Two
  • Item Three
<UL TYPE=SQUARE>
<LI>Item One
<LI>Item Two
<LI>Item Three

</UL>

Discs

Some editors allow you to add code for a unordered list with a DISC before each item. This feature and its code have been tested with Netscape 1.1 and Netscape 2.0. It added the standard bullet to each item, not a disc.

The Code
<UL TYPE=DISC>

Images in Place of Bullets

Graphics can be used instead of plain bullets to liven up your document. For example, you can add a yellow star in front of your list items instead of a bullet. With the image source code, you can put any number of images in place of bullets. However, if overdone, it can interfere with the readability of your pages.

*Code: <IMG SRC="address of graphic"ALT="*">

This code entirely replaces the list codes, and is placed in front of each list item.

NOTES:
If the image is before a short line of text, it will look similar to a regular unordered list. However, if the text wraps to a second line of text, that line (and subsequent lines) will line up with the image, not the first character of text.
For more information, refer to the following pages:UWEC Image Archive or Adding Images to your Web Pages.

return to topOrdered Lists

When you want to create a numbered list, you can use the ordered list HTML codes to automatically number your list (even if you add or delete items from the list!). The default settings creates a numbered list using Arabic numerals. If this doesn't fit your needs, you can explore the options of uppercase or lowercase alphabetic characters or Roman numerals. These codes are entered with the initial code ( <OL> ).

Basic Ordered List Example

Example The Code
  1. Item One
  2. Item Two
  3. Item Three
<OL>
<LI>Item One
<LI>Item Two
<LI>Item Three

</OL>

Custom Ordered Lists

List Example for Uppercase Alpha Characters

Example The Code
  1. Item One
  2. Item Two
  3. Item Three
<OL TYPE=A,B,C,...>
<LI>Item One
<LI>Item Two
<LI>Item Three

</OL>

Other Options
Option The Code
Lowercase Alpha Characters
<OL TYPE=a, b, c, ...>
Uppercase Roman Numerals
<OL TYPE=I, II, III, ...>
Lowercase Roman Numerals
<OL TYPE=i, ii, iii, ...>

return to topDefinition Lists

An ordered or unordered list is not appropriate for all of your work. A third type of list, the definition list, may be helpful for some options. As the name implies, it comes in handy for definitions but can also be used for a variety of other options. The <DD> code can also be used similar to the [Tab] key for an initial paragraph indent.

Definition List Example

Links
The text a person selects (by clicking or using the keyboard keys) that branches on to another document, another location in the current document or another Internet tool.
Template
A skeleton Web page that can be used as a basis for all similar pages in a site.

Definition List Code

<DL>
<DT>Links
<DD> The text a person selects (by clicking or using the keyboard keys) that branches on to another document, another location in the current document or another Internet tool. <P> (optional paragraph break)

<DT>Template
<DD>A skeleton Web page that can be used as a basis for all similar pages in a site.
</DL>

return to topEmbedding Lists

One type of list can be embedded into another. For example, you may need to have bulleted choices under one of your numbered steps. When you embed one type of list into another, be sure to turn the embedded list off before you try to continue with the first list.

Embedded List Example

Example The Code
  1. Item One
    • Choice One
    • Choice Two
    • Choice Three
  2. Item Two
  3. Item Three
  4. Item Four
<OL>
<LI>Item One
<UL>
<LI>Choice One
<LI>Choice Two
<LI>Choice Three
</UL>

<LI>Item Two
<LI>Item Three

</OL>

Excellence. Our Measure. Our Motto. Our Goal.