HTML provides formatting for lists
• where each item has a bullet
• and lines up like so.
• This is called an Unordered List. (try it)

HTML provides alternate formatting for lists
1. where each item has a sequential number
2. This is called an Ordered List. (try it)

The last (current) alternate formatting for lists

where each item has indented text

with no bullet or number

is called a Definition List. (try it)

Let's practice. Open sample.htm and make an Unordered List. Paste the following:

See what it looks like. <ul></ul> are the Unordered List tags. <li></li> are the List Item tags. You can have as many List Item tags in your Unordered List as you like.

Now change the 'u' to an 'o' in <ul> </ul> to make it <ol></ol>. Again, see what it looks like. This is an Ordered List. Likewise, you can have as many List Item tags in your Ordered List as you like.

To make a Definition List, type the following:

See what this one looks like. You can add as many Definition Terms as you like between the <dl></dl> tags, and as many Definition Definitions as you like after the <dt></dt> tags.

You can nest any of these lists within any other. For instance, glance through the code below, and see the output in following box (save the code in your sample.htm file for reference later):

We start with a base Ordered List.
<ol>
 <li>This is the first item in the base Ordered List.</li>
 <li>This is the second item in the base Ordered List.</li>
 <li>For the third item, we nest an Unordered List within.</li>
  <ul>
   <li>This is the first item in the nested Unordered List.</li>
   <li>The second item is yet, another nested Unordered List</li>
    <ul>
     <li>with its first List Item</li>
     <li>and its second.</li>
    </ul>
   <li>This is the third item in the nested Unordered List.</li>
  </ul>
 <li>This is the fourth item in the base Ordered List.</li>
 <li>For the fifth item we insert the first nested Definition List</li>
  <dl>
   <dd>with its first Definition definition.</dd>
   <dd>Its second Definition definition is the second nested Definition List.</dd>
    <dl>
     <dd>Here is the first Definition definition of the second nested Definition List.</dd>
     <dd>Getting confused?  Here is the third nested Definition List.</dd>
      <dl>
       <dd>Here is the first Definition definition of the third nested Definition List.</dd>
       <dd>This is a bit much, but refer to this code to see how it is done.</dd>
      <dt>Try to follow along.</dt>
       <dd>This is just to show you more than you would ever want to do.</dd>
      </dl>
     <dd>Here is the third Definition definition of the second nested Definition List.</dd>
    </dl>
   <dd>Here is the third Definition definition of the first nested Definition List.</dd>
  </dl>
 <li>This is the sixth item in the base Ordered List.</li>
 <li>This is the seventh item in the base Ordered List.</li>
</ol>

Would look like this:

Try it.

For Unordered and Ordered lists, you can change the default List Item icon/number. This is the HTML coding for ordered lists, and the HTML coding for unordered lists. You will learn another way, using Style, in Lesson 8. For now, try this on an Unordered List you already made:

It made the bullet a square. Now try this on an Ordered List you already made:

It changes the List Item numbers to Roman Numerals. On this same Ordered List, now type:

And notice what it does to your Title. Here are these two Style commands:

In this lesson, we learned about these HTML tags:

<ul> and </ul> (also <dir> and </dir> and <menu> and </menu>)

<ol> and </ol>

<li> and </li>

<dl> and </dl>

<dt> and </dt>

<dd> and </dd>

and these Style properties:

list-style-type and
list-style-position