Learning Activities - Lists
The displaying of text in a list is quite common. The list may be numbered (1, 2, 3, ....) or bulleted list or even the typical outline format of:

 A
 B
 C
II
 A
 B
 C
While this is accomplished using blank space characters (see the use above of the   characters), the HTML coding offers much more efficient ways to accomplish lists with less coding and also insure vertical alignment is proper even if you later decide to change font or font size.

The first tag to begin a list is the 'ordered list' or the <ol> tag.

This indicates that the developer wants to begin a listing of items. These items will be automatically numbered beginning with 1.

The first item in the list is preceded by the list tag or the <li> tag. At the end of each item in the list you should close the listing tag with a </li>. You may choose to have text displayed on two lines withing a new number by using the break tag <br>.

Like all good HTML tags, the ordered list should be closed with the close list tag or the </ol>

If you need to begin a number list with a number other than 1, simple tell the browser where to start by using the tag:

<ol start = 5>

to indicate you wish to begin numbering the list with the value 5 (or whatever number you wish).

You have several "numbering" styles to pick from for your ordered list. The following table describes the different types of numbering you could get with by indicating what type you desire.
 

Type
Result
A
A, B, C
a
a, b, c
I
I, II, III
i
i, ii, iii
1
1, 2, 3
Examples Might be:
  1. Heading for Item 1
    1. A comment for Item A
      1. First Specific
      2. Second Specific
    2. A comment for Item B
      1. First Specific
      2. Second Specific
  2. Heading for Item 2


View this HTML code. You may think the nested tags a little overkill in this example, but the HTML savings is seen when your outline begins to take shape and vertical spacing is achieved by just entering your information that wraps to a second and third line.

You may also wish to display your listing without any order. This is called the unordered list. The particular tag used to indicate this type is the <ul> tag. As with the ordered list, the items that are listed are preceded with the list tag or the <li> tag and closed with the </li> tag.

The <ul> tag will indicate that the items in the list are to be displayed slightly indented with a bullet preceding each item. An example follows:

Picnic Items

Main Menu