HTML Lists

In HTML, you can have bullet point or numbered lists. You can also use lists for creating glossaries and for just plain indentation.

A Numbered List is Called an "Ordered List"

1. This is an example of an ordered list.
2. The information is numbered sequentially.
3. It uses the tag: OL
4. Each item within a list is designated by the tag LI (list item).

You Can Use Other Numbering Schemes

1. To get upper case Roman numerals, use the OL tag with the attribute and value of: TYPE="I" (in case you can't tell, that value is an upper case letter "i")
2. The other available numbering TYPEs are: i, A, a
3. The START attribute allows you to specify an initial value for an ordered list other than the default of one.
4. See the example of a different START value in the Nested Lists section below.

Bullet Points Are Called an "Unordered List"

By default, unordered list items use a solid black circle called a bullet. However, nested unordered list items use different symbols. Solid bullets are for the top level, followed by a hollow CIRCLE then a SQUARE. Squares are also used for all subsequent sub-lists.

• A bulleted list is called an UNordered list; the tag is UL.
  • There are other bullet symbols available.
  • The other bullet types are:
  • CIRCLE and...
    • SQUARE
• These other bullet symbols are displayed automatically when you nest lists (see next section).
• They can also be designated with the TYPE attribute (for example: TYPE="CIRCLE").
• CSS is also capable of displaying the other types, or even small images, instead of bullets.

Nested Lists

The unordered (bulleted) list above contains two nested lists. The first nested list includes three list items. By default, the list items in a first nested list are usually displayed with hollow circles at the start of each list item. The list that is nested within the first nested list has only one list item ("SQUARE") and uses a small black square instead of a solid bullet or hollow circle.

Subordinating a nested list within a parent list

When you nest a list inside another list (a parent list), the nested (child) list is treated as if it were a part of the list item in the parent list above it. The closing </li> tag for the list item that is before a nested list begins (before the child list's opening <ul> or <ol> tag) comes after the closing nested list's closing tag ( </ul> or </ol> ). To create a list within another list (referred to as a child, sub-list, or nested list):

1. Start the primary list out with one or more list items.
2. Do not put a closing list item tag on the list item that comes immediately before the nested list begins. The nested list is considered to be a part of the list item of the parent list that comes before the nested list.
3. Put in an opening list tag (ol or ul). This will begin the nested list.
4. Then create as many nested list items ( <li> ) for the nested list as you need, each with its own opening and closing ( </li> ) tags.
5. After the last nested list item's closing tag, put in the nested list's closing tag (/ol or /ul).
6. Then close the list item tag for the list item that came before the opening sub-list tag (as referred to in step 2).
7. Then continue normally with the list items for the primary list.
8. Then close it as usual with a < /ul > or < /ol> closing tag.

Note that you can nest ordered lists within unordered lists and vice versa, as you will see in the example below.

Specifying a Starting Number

3. Lists in HTML have many options.
4. First is the ability to number items sequentially.
5. That is called an ordered list.
6. You can also specify the starting number by using the START attribute.
7. This list was set to start at 3.
   • Bullet points can be created using an unordered list.
   • There are different styles of bullets.
   • An empty circle designates a second level bullet point.
8. When you return to the un-nested list, it sometimes picks up where it left off, numerically.
9. When you test nested lists in a browser you may find that you need to add the VALUE=n attribute (substitute the number you want for n) to the list item tag that is immediately after the nested list in order to to get the numbering restarted properly.

Indenting With Lists

You can use the UL or OL tag without any LI tags to create an indentation on the left side. If you look at the code you can see how it's done here. Indenting this way affects only the left margin whereas indenting with the BLOCKQUOTE tag indents from both margins. Using a list tag in this way is a hack. Indentation of this type is usually done now with the css margin property.

Your assignment:

1. Save this file as F01_yourlastname.html
2. Modify the second ordered list on the page (which now uses Roman numerals) to use the lower case alphabet (a, b, c, etc.).
3. Change the starting number of the last list above to 10 (it starts at 3 now).
4. Copy THIS list of instructions (all 8 items) and paste it below this list of instructions (above the copyright).
5. Change the list you just pasted into an UNordered list (that means bullet points).
6. In your newly bulleted list, create a "nested" ORDERED (numbered) sub-list of 3 items within it by converting the third through fifth list items from being unordered to ordered. This means that the original list items 3, 4, and 5 (the lines starting with the words: Change, Copy, and Change) ought to end up being nested and numbered and the other items bulleted. IMPORTANT: Re-read the section above Subordinating a nested list within a parent list before doing this part of the assignment.
7. Save your file. Check it in the browser.
8. Online students: send your file to me by email the usual way.

© 2012 Dan Vaughan and its licensors. All rights reserved.