Instructional Module W22d

Lists in HTML

Contents

About this Document

Audience and Objectives

Review

 

Lists: The Basics

A List in HTML is a series of items each preceded by a marker and displayed using a hanging indent. If that sounds like gobledegook, just hang on - there are plenty of examples coming up!

HTML provides two main kinds of lists:

  1. Ordered lists have a number or letter as the preceding marker. This is an Ordered list. The browser keeps track of the numbering for you.
  2. Unordered lists have a printer's "bullet" as the marker in front of them. Each item in the list is preceded by a the same bullet character, unless lists are nested, in which case each level may have different characters, or the same, depending on the browser.

Here are some of the details...

Unordered Lists

<ul>...</ul>

<li>...</li>

The table of contents of this module is an Unordered list.

To create an Unordered list, we have to identify :

  • The beginning and end of the list, and
  • The beginning and end of each item in the list.

The tag for identifying an Unordered list is <ul> at the start and </ul> at the end. To identify each item in the list, start with <li> and end with </li>.

Example:

HTML Browser display:

<p>This is a normal paragraph</p>

<ul>

<li>This is an unordered list element</li>

<li>This is another one</li>

<li>we can have as many as we like.</li>

</ul>

<p>This returns to normal</p>

This is a normal paragraph

  • This is an unordered list element
  • This is another one
  • we can have as many as we like.

This returns to normal

 

Ordered Lists

<ol>...</ol>

<li>...</li>

 

To create an Ordered list, we have to identify the same things as in an Unordered list:

  1. The beginning and end of the list, and
  2. The beginning and end of each item in the list.

The tag for identifying an Unordered list is <ul> at the start and </ul> at the end. To identify each item in the list, start with <li> and end with </li>.

Example:

HTML Browser display:

<p>This is a normal paragraph</p>

<ol>

<li>This is the first list element</li>

<li>This is the second element</li>

<li>we can have as many as we like.</li>

</ol>

<p>This returns to normal</p>

This is a normal paragraph

  1. This is the first list element
  2. This the second element
  3. we can have as many as we like.

This returns to normal

 

What are some things not to do?

Don't...

  1. Forget the closing tag
  2. Put items in the list without the <li> </li> tags
  3. Put <li> tags outside of a list

 

Ordered Lists: The Details

Ordered lists use arabic numerals by default, but are capable of using roman numerals or letters of the alphabet in either upper or lower case. Lists can also be restarted after a break by specifying a starting number. Here's how...

Types of Ordered Lists

<ol type="?">

There are five standard types of ordered list, each shown by a type modifier in the <ol> tag:

  • Arabic numerals (default) type="1"
  • Roman numerals in lower case type="i"
  • Roman numerals in upper case: type="I"
  • Letters in lower case: type="a"
  • Letters in upper case: type="A"

Examples:

HTML

Browser display:

<p>This is a normal paragraph</p>
<ol type="1">
<li>This is an arabic ordered list element</li>
<li>This is the second one</li>
<li>we can have as many as we like.</li>
</ol>

This is a normal paragraph

  1. This is an arabic ordered list element
  2. This is the second one
  3. we can have as many as we like.
<ol type="i">
<li>This is a lower-case roman ordered list element</li>
<li>This is the second one</li>
<li>we can have as many as we like.</li>
</ol>
  1. This is a lower-case roman ordered list element
  2. This is the second one
  3. we can have as many as we like.
<ol type="I">
<li>This is an upper-case roman ordered list element</li>
<li>This is the second one</li>
<li>we can have as many as we like.</li>
</ol>
  1. This is an upper-case roman ordered list element
  2. This is the second one
  3. we can have as many as we like.
<ol type="a">
<li>This is a lower-case alphabetic ordered list element</li>
<li>This is the second one</li>
<li>we can have as many as we like.</li>
</ol>

  1. This is a lower-case alphabetic ordered list element
  2. This is the second one
  3. we can have as many as we like.
<ol type="A">
<li>This is an upper-case alphabetic ordered list element</li>
<li>This is the second one</li>
<li>we can have as many as we like.</li>
</ol>
  1. This is an upper-case alphabetic ordered list element
  2. This is the second one
  3. we can have as many as we like.

 

Breaking and Restarting Ordered Lists

Sometimes it's necessary to put a paragraph into a list without numbering it. There are at least three ways this can be done, but not all of them are valid XHTML:

  1. By ending the list and restarting it with a specific starting number (valid);
  2. By using the break tag <br /> rather than a paragraph (valid).
  3. By putting a <p>aragraph</p> into the middle of the list (does not validate);

Here are examples of each:

HTML Browser display:
<ol type="I">
<li>This is an upper-case roman ordered list element</li>
<li>This is the second element of the list.</li>
</ol>
<p>Here is a paragraph which is not part of the Ordered list. Notice that it is <i>not</i> indented with the list.(This is a valid XHTML technique.)
<ol type="I" start="3">
<li>To re-start the list we need to specify the number at which to restart.</li>
<li>That partially defeats the convenience of having the browser keep track of numbering for us.</li>
</ol>
  1. This is an upper-case roman ordered list element
  2. This is the second element of the list.

Here is a paragraph which is not part of the Ordered list. Notice that it is not indented with the list. (This is a valid XHTML technique.)

  1. To re-start the list we need to specify the number at which to restart.
  2. That partially defeats the convenience of having the browser keep track of numbering for us.
<ol type="i">
<li>This is a lower-case roman ordered list element <br />
By using the "break" tag we canstart a new line without added extra
space. Notice that the text here and in the paragraph example above has the same hanging indent as
the list. </li>
<li>This is the second list element.</li>
<li>we can have as many as we like.</li>
</ol>

  1. This is a lower-case roman ordered list element

    2. By using the "break" tag we canstart a new line without added extra space. Notice that the text here and in the paragraph example above has the same hanging indent as the list.
  2. This is the second list element.
  3. we can have as many as we like.

<p>This technique may be useful in HTML, but is not valid in XHTML.</p>
<ol type="1">
<li>This is an arabic ordered list element</li>
<p>This is a paragraph within a list. Notice the amount of space above and below this paragraph.</p>
<li>This is the second list element</li>
<li>we can have as many as we like.</li>
</ol>

This technique may be useful in HTML, but is not valid in XHTML.

  1. This is an arabic ordered list element

    2. This is a paragraph within a list. Notice the amount of space above and below this paragraph.

  2. This is the second list element
  3. we can have as many as we like.

 

 

Nested Lists

Lists in one level are OK, but kind of boring. To really enjoy lists, you have to nest lists within lists within lists... The basic idea is that while you're working in one list, you start a new list before closing the first. You can freely mix Ordered and Unordered lists.

Ordered

Here are examples of nested ordered lists:

HTML

Browser display:


<p>This is a normal paragraph</p>
<ol>
<li>This is an element of the first list</li>
<li>This is the second element of the first list
<ol>
<li>Second list: first element</li>
<li>Second list: second element
<ul>
<li>Third list: unordered</li>
<li>Third list: another unordered element</li>
</ul>
</li>
<li>Second list: third element</li>
</ol>
</li>
<li>First list: third element</li>
</ol>

This is a normal paragraph

  1. This is an element of the first list
  2. This is the second element of the first list
    1. Second list: first element
    2. Second list: second element
      • Third list: unordered
      • Third list: another unordered element
    3. Second list: third element
  3. First list: third element
<ol type="1">
<li>The first list is numbered with arabic numerals.</li>
<li>This is the second element of the first list
<ol type="A">
<li>Second list: numbered with upper-case alphabetic letters</li>
<li>Second list: second element
<ol type="i">
<li>Third list: numbered with lower-case roman numerals</li>
<li>Third list: second item</li>
</ol>
</li>
<li>Second list: third element</li>
</ol>
</li>
<li>First list: third element</li>
</ol>
  1. The first list is numbered with arabic numerals.
  2. This is the second element of the first list
    1. Second list: numbered with upper-case alphabetic letters
    2. Second list: second element
      1. Third list: numbered with lower-case roman numerals
      2. Third list: second item
    3. Second list: third element
  3. First list: third element

 

Unordered

Nesting Unordered lists is very much like nesting ordered lists. The issue is what form of printer's bullet will be used by the browser? If you leave it unspecified, this varies from browser to browser.

HTML Browser display:

<ul>
<li>This is an element of the first list</li>
<li>This is the second element of the first list
<ul>
<li>Second list: first element</li>
<li>Second list: second element
<ul>
<li>Third list: unordered</li>
<li>Third list: another unordered element</li>
</ul>
</li>
<li>Second list: third element</li>
</ul>
</li>
<li>First list: third element</li>
</ul>

This is a normal paragraph

  • This is an element of the first list
  • This is the second element of the first list
    • Second list: first element
    • Second list: second element
      • Third list: unordered
      • Third list: another unordered element
    • Second list: third element
  • First list: third element

You can specify a Type much as you can with the Ordered lists. There are three symbols recognized:

  • circle
  • disc
  • square
HTML Browser display:

<ul type="square">
<li>This is an element of the first list, with the type set to Square.</li>
<li>This is the second element of the first list
<ul type="disc">
<li>Second list: first element, with the type set to Disc</li>
<li>Second list: second element
<ul type="circle">
<li>Third list: unordered, with type set to Circle</li>
<li>Third list: another unordered element</li>
</ul>
</li>
<li>Second list: third element</li>
</ul>
</li>
<li>First list: third element</li>
</ul>
  • This is an element of the first list, with the type set to Square.
  • This is the second element of the first list
    • Second list: first element, with the type set to Disc
    • Second list: second element
      • Third list: unordered, with type set to Circle
      • Third list: another unordered element
    • Second list: third element
  • First list: third element

 

 

 

About this document...

Review:

 Link to review quesitons and answers.

Audience:

 This is for people who understand the concepts of HTML (see module W22c "HTML Concepts") and wish to learn how to apply list formatting to text.

Objectives:

When you successfully complete this lesson, you will be able to...

  • Define "List" as used in HTML terminology
  • Identify the basic types of lists (ordered and unordered)
  • Recognize the correct syntax for creating ordered and unordered lists
  • Recognize the correct syntax for changing the type and starting number of ordered lists
  • Recognize the correct syntax for nesting lists
  • Describe how the major browsers handle bullets in nested unordered lists

Module W22d: Lists in HTML

 This document is part of a modular instruction series. For more information, see the overview or the list of modules in this series, W: World Wide Web. This document has been used in the following classes: INP 165, INP 150

Author:

 Laurence J. Krieg, Internet Professional Department

Institution:
Washtenaw Community College
History: Original: 02 November 2000
Last modification:  Monday, 31-Aug-2009 11:48:05 EDT  
Copyright: Copyright © 2001, Laurence J. Krieg.
Instructors: You may point to this file in your Web-based materials.
Students: you may make a copy for your personal use.
All other uses: contact the author, Laurence J. Krieg for permission. Email krieg@ieee.org