An ESPG Lesson in Web Design

Table of Contents

Part 6: Lists

Using lists is another way to effectively organize information on a page. There are several different types of lists available--numbered, unnumbered and definition. We will explore how each of these works in the information that follows:

Back to the Table of Contents

Part 6A: Numbered Lists

To use a numbered list, one begins with the opening Numbered List tag <OL>. After this, one lists each item preceded by the list item ( <LI> ) tag. The entire list is ended with the inverse number list tag ( </OL> ).

The example which follows helps to illustrate how this is accomplished:

<OL>
<LI>Kate
<LI>Matt
<LI>Lori
<LI>Kevin
</OL>

The output for such coding would be:

  1. Kate
  2. Matt
  3. Lori
  4. Kevin

Back to the Table of Contents

Part 6B: Unnumbered Lists

Sometimes we want to list items without numbers--with bullets alone. This is accomplished through the use of an unnumbered list. An unnumbered list is used much as a numbered list, with one exception: instead of using the ordered list (<OL>) tag, one uses the unnumbered list (<UL>) tag. The example which follows demonstrates this:

<UL>
<LI>Coffee
<LI>Tea
<LI>Cookies
</UL>

The output for such would be:

Items in a list do not have to be single words. A sentence, or paragraph or two may be items contained in a list. One just needs to be sure to use the proper coding for a paragraph contained within a list.

Back to the Table of Contents

Part 6C: Definition Lists

Definition lists ( <DL> ) are fairly much what their name says that they are. Such type of list is very useful for making a glossary or such. Definition lists contain a definition term ( <DT> ) as well as a definition ( <DD> ). The following example demonstrates this:

<DL>
<DT>WWW
<DD>World Wide Web
<DT>HTML
<DD>Hyper-Text Mark-up Language
</DL>

The output would be:

WWW
World Wide Web
HTML
Hyper-Text Mark-up Language

Most browsers will display the definition on a separate line, indented. Sometimes, you may want to force the definition to be on the same line as the term. This is where a COMPACT attribute can be very handy. With the last example, the terms and definitions were very short, and a compact definition would be a good option:

<DL COMPACT>
<DT>WWW
<DD>World Wide Web
<DT>HTML
<DD>Hyper-Text Mark-up Language
</DL>

The output would be:

WWW
World Wide Web
HTML
Hyper-Text Mark-up Language

Back to the Table of Contents

Part 6D: Nested Lists

Sometimes it is appropriate to have a list within a list--a nested list. One must be careful when organizing such a list, though, since they can easily become unorganized and confusing. It is best to not nest more than three levels. The following is a simple example:

<UL>
<LI>These are a few of our favorite foods
<UL>
<LI>Peaches
<LI>Apples
<LI>Sorbet
</UL>
<LI>These are some foods we dislike
<UL>
<LI>Oysters
<LI>Frog's Legs
<LI>Goat's Milk
</UL>
</UL>

This nested list would look like:

A good thing to notice in this example is the indentations used in the coding. Indenting certain parts, where applicable, helps with organization so that mistakes are not made as readily. The code is also read much more easily when it is formatted in this manner.

Numbered lists can also be made nested, if you add the phrase type="n" to the <ol> tag, where n is the starting letter type for that particular list, and then follow the same pattern as above. This method was used in generating the page outline in Part 3:
  1. Main Page (index.html)
    1. Mission Pages (missions.html)
    2. Outreach Pages (outreach.html)
    3. Smart Page (Smart/smart.html)
      1. Link to UNH SMART Page (www.smart.unh.edu)
      2. Web Design Lesson (WebLesson/weblesson.html)
        1. lesson1.html
        2. lesson2.html
        3. lesson3.html
        4. etc.
      3. Intro to SMART Student Pages (Smart/smartpages.html)
        1. student1.html
        2. student2.html
        3. student3.html
        4. etc.
 
    

  1. Main Page (index.html) 
      

    1. Mission Pages (missions.html)
      2. 

    2. Outreach Pages (outreach.html)
      3. 

    3. Smart Page (Smart/smart.html) 
        

      1. Link to UNH SMART Page (www.smart.unh.edu)
        2. 

      2. Web Design Lesson (WebLesson/weblesson.html) 
          

        1. lesson1.html
          2. 

        2. lesson2.html
          3. 

        3. lesson3.html
          4. 

        4. etc.
          5. 

        

        3. 

      3. Intro to SMART Student Pages (Smart/smartpages.html) 
          

        1. student1.html
          2. 

        2. student2.html
          3. 

        3. student3.html
          4. 

        4. etc
          5. 

        

        4. 

      

      4. 

    

    2.

On to Part 7: Character Formatting