Lesson 5 - Lists

    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)
Similar to an Unordered list are the Directory and Menu tags.
  • This is a Directory List
  • Which looks just like an Unordered List
  • Rather than ul, the tag is dir or menu
  • Consider the tags obsolete or retired
  • Need to know if you are editing older pages
  • Let's practice. Open sample.htm and make an Unordered List. Paste the following:

    Type the name of your Unordered List
    <ul>Type a header here
      <li>Type the first item here</li>
      <li>Type the second item here</li>
      <li>Type the third item here</li>
    </ul>

    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:

    <dl>Type the name of your Definition List
      <dt>This is where you place the "definition term"</dt>
        <dd>This is the first definition definition.</dd>
        <dd>Type the second item here</dd>
        <dd>Type the third item here</dd>
    </dl>

    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:

    We start with a base Ordered List.
    1. This is the first item in the base Ordered List.
    2. This is the second item in the base Ordered List.
    3. For the third item, we nest an Unordered List within.
      • This is the first item in the nested Unordered List.
      • The second item is yet, another nested Unordered List
        • with its first List Item
        • and its second.
      • This is the third item in the nested Unordered List.
    4. This is the fourth item in the base Ordered List.
    5. For the fifth item we insert the first nested Definition List
    6. with its first Definition definition.
      Its second Definition definition is the second nested Definition List.
      Here is the first Definition definition of the second nested Definition List.
      Getting confused? Here is the third nested Definition List.
      Here is the first Definition definition of the third nested Definition List.
      This is a bit much, but refer to this code to see how it is done.
      Try to follow along.
      This is just to show you more than you would ever want to do.
      Here is the third Definition definition of the second nested Definition List.
      Here is the third Definition definition of the first nested Definition List.
    7. This is the sixth item in the base Ordered List.
    8. This is the seventh item in the base Ordered List.

    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:

    . . .
    <ul style="list-style-type:square">Title
    <li>First list item.</li>
    . . .
    </ul>

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

    . . .
    <ol style="list-style-type:upper-roman">Title
    <li>First list item.</li>
    . . .
    </ol>

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

    . . .
    <ol style="list-style-type:upper-roman; list-style-position:inside">Title
    <li>First list item.</li>
    . . .
    </ol>

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

    list-style-type: Possible values for Unordered Lists are
    • 'disc' (the default value),
    • 'circle',
    • 'square' and
    • url(image.gif) to substitute any image you like.
    Possible values for Ordered Lists are
    • 'decimal' for numbers (the default value),
    • 'upper-alpha' for uppercase letters,
    • 'lower-alpha' for lowercase letters,
    • 'upper-roman' for uppercase Roman numerals, and
    • 'lower-roman' for lowercase Roman numerals
    Try it on Unordered Lists and Ordered Lists and bullet images.
    list-style-position: possible values are 'outside' (the default value) or 'inside'.   (try it)

    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
    By now, your sample.htm file should look like this.
    For more information on the topics of this Lesson, see list tags and list styles.

    Lesson 4B Headers   < <  PREVIOUS   Table of Contents NEXT  > >   Lesson 6A Div & Span

    Developed with HTML-Kit
    Sandersongs Web Tutorials
    Contact the Webmasterwith comments.
    ©2017, by Bill Sanders, all rights reserved.
    This domain had 4,005 different visits in the last 30 days.
    435,571 hits on this domain since 24 Nov 2006.
    http://www.sandersongs.com/HTMLcourse/Lesson05.php
    This page was last modified on our server on 25 Sep 2013
    and last refreshed on our server at 3:56 am, MST
    This file took 0.00909 seconds to process.