Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | previous | next |

6. Lists, Lists, Lists

Lists can present items of information in an easy-to-read format. In fact, there is a list right here, lurking under the next heading!

Objectives

After this lesson, you will be able to:

Identify HTML codes for creating unordered, ordered, and nested lists for a web page.
Place different list types within your HTML document and view the changes within your web page.

Lesson

Many web pages display lists of items -- these may be items preceded with a "bullet" (Unordered) or a sequentially numbered list (Ordered).

These lists are easy to format in HTML, and they may even be nested (lists of lists) to produce an outline format. Lists are also handy for creating an index or table of contents to a series of documents or chapters.

Unordered Lists

Unordered Lists, or <ul> .. </ul> tags, are ones that appear as a list of items with "bullets" or markers in the front. The bullet marks will depend on the particular version of your web browser and the font specified for displaying normal WWW text (e.g. for Macintosh, the bullets are the option-8 character -- in Times font this is a small square, in Geneva it is a large round dot).

Here is an example of an unordered list:

My Unordered List:

Item 1
Item 2
Item 3

And this is the HTML format for producing this format:


     <B>My Unordered List:</B>
     <ul>
       <li> Item 1
       <li> Item 2
       <li> Item 3
     </ul>

The <ul> tag marks the beginning and end of the list, and the <li> indicates each list item.

Ordered Lists

Ordered lists are ones where the browser numbers each successive list item starting with "1." Note that the only difference is changing the ul tag to ol tag.

Using the example from above:

My Ordered List:

Item 1
Item 2
Item 3

And this is the HTML format for producing this format:


     <B>My Ordered List:</B>
     <ol>
       <li> Item 1
       <li> Item 2
       <li> Item 3
     </ol>

Nested Lists

Ordered Lists and Unordered lists can have different levels; each will be indented appropriately by your web browser. Your major concern will be to verify that each list is properly terminated and the nesting order is correct.

It can start to look complicated with all of those <ol> <li> </ul> <li> tags floating around, but just try to remember the basic structure:


      <ul>            <ol>
          <li>           <li>
          <li>           <li>
      </ul>           </ol>

Here is an example of an unordered list with sublevels of other lists:

Nested Unordered List

This is the first item
This is the second item
- This is the first subitem of the second item
  - And this is a subitem of a subitem
  - Getting lost yet?
- This is the second subitem of the second item
- This is the third subitem of the second item
This is the third item

Note how the bullet marks change for different levels of the list.

And this is the HTML format for producing this format:


  <B>Nested Unordered List</B>
  <ul>
     <li>This is the first item
     <li>This is the second item
     <ul>
       <li> This is the first subitem of the second item
       <ul>
         <li> And this is a subitem of a subitem
         <li> Getting lost yet?
       </ul>
       <li> This is the second subitem of the second item
       <li> This is the third subitem of the second item
       </ul>
     <li>This is the third item
  </ul>

Nested Lists -- Mixing them together

Not only can you include ordered lists within ordered lists, but you can also mix and match list types. Hold onto your hats! The HTML starts to look pretty ugly, but watch how lists completely contain other lists.

For example, this ordered list includes a nested unordered list:

Nested Unordered List Nested Unordered List

This is the first item
This is the second item
- This is the first subitem of the second item
  1. An this is a numbered subitem of a subitem
  2. An this is another numbered subitem of a subitem
  3. Getting lost yet?
- This is the second subitem of the second item
- This is the third subitem of the second item
This is the third item

And this is the HTML format for producing this format. Note how the HTML has been indented to make it easier to read:


<B>Nested Unordered List</B>
     <ol>
        <li>This is the first item
        <li>This is the second item
           <ul>
           <li> This is the first subitem of the second item
              <ol>
              <li> And this is a numbered subitem of a subitem
              <li> And this is another numbered subitem of a subitem
              <li> Getting lost yet?
              </ol>
           <li> This is the second subitem of the second item
           <li> This is the third subitem of the second item
           </ul>
        <li>This is the third item
     </ol>

Placing Lists in Your HTML Document

Note: If you do not have the working document from the previous lesson, download a copy now.

Using the list tags, you will now add an ordered and an unordered list to your Volcano Web page.

Re-open your workspace (if not already opened).
Open your HTML document in the text editor.
Under the Volcano Terminology header we will use an unordered list to display examples of technical words used in the study of volcanoes. Go to this section in your HTML document.
First add the following sentence.
```
     How many do you know?
```

Now enter the HTML format to create the list of terms:

      <ul>
          <li>caldera
          <li>vesicularity
          <li>pahoehoe
          <li>rheology
          <li>lahar
      </ul>

Now we will use an ordered list to define the required parts of the assignment in this lesson. Under the Research Project heading, enter the following: (HINT -- this might be a good time to copy and paste from the web page, unless you enjoy typing in text!)


  Your mission is to find information and report on a volcano, 
  other than the ones listed above, that has erupted in the last 
  100 years. Your reports must include:
  <ol>
    <li>Type of volcano
    <li>Geographic location
    <li>Name, distance, and population of nearest major city
    <li>Dates of most recent and most destructive eruptions.
    <li>Other events associated with the recent eruptions  
    (earthquakes, floods, mudslides, etc)
  </ol>
  <p>
  Then, write a one page description on the major hazards to humans 
  in the vicinity of this volcano. Speculate on what you would do 
  if you were in charge of minimizing the risk to the population.

Save your HTML file and Reload in your web browser.

Check Your Work

You may want to compare your document with a sample for this section. If your list is different than the list in the sample, review how you entered your list in your text editor. Make sure it matches the instructions in the Placing Lists in Your HTML Document section of this lesson.

Review Topics

How are lists valuable in a web page?
What is the HTML tag for a unordered list?
What is the tag for a ordered list?
How might you set up a nested list?
What steps did you use in adding a list to your HTML document?

Independent Practice

You may want to experiment with changing the ordered list you created to one that is unordered. Also, insert an ordered or an unordered list of items to your own WWW document. Be sure to verify that it displays correctly in your web browser. Can you create a list that includes sub-lists?

Coming Next....

Making it more than just plain text -- adding pictures to your page.

GO TO.... | Lesson Index | previous: "Stylized Text" | next: "Graphics" |

Writing HTML: Lesson 6: Lists, Lists, Lists
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

The 'net connection at MCLI is Alan Levine
Comments to alan.levine@domail.maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut6.html