Getting Down with ...

by ...

Lesson n:

Unordered Lists

Here is how the list parts should look together in a list of fruits:

<ul>
  <li>apples</li>
  <li>bananas</li>
  <li>cherries</li>
  <li>grapes</li>
</ul>

When rendered it looks like this:

Note: white space more than a single character is ignored by browsers when rendering HTML source (except in <pre></pre> elements), but formating is important to people who create and maintain HTML documents. So keep your HTML source clean with indentation and white space to make it easy to read.

Ordered Lists

  1. Ordered lists are used for enumerated items.
  2. This is a ordered list item which starts with <ol>
  3. Each list item is still a <li>.
  4. Close it with a </ol>

Ordered lists come in five types, which enumerate the list with:

  1. <ol type=1>: decimal numbers (1, 2, 3, ...), the default type.
  1. <ol type=a>: lower case letters (a, b, c, ...).
  1. <ol type=A>: upper case letters (A, B, C, ...).
  1. <ol type=i>: lower case roman numbers (i, ii, iii, iv, ...).
  1. <ol type=I>: upper case roman numbers (I, II, III, IV, ...).

Add the appropiate type attribute to the inside the open ol tag to get the enumeration type you want.

Let's look at our list of fruits again enumerated with upper case Roman numbers:

<ol type="I">
  <li>apples</li>
  <li>bananas</li>
  <li>cherries</li>
  <li>grapes</li>
</ol>

When rendered it looks like this:

  1. apples
  2. bananas
  3. cherries
  4. grapes

Description Lists

This is used for lists of terms and their descriptions.

HTML
Hyper-text Markup Language
WWW
World Wide Web
W3C
World Wide Web Consortium
dl
description list
dt
description term
dd
description details

The source code looks like this:

<dl>
  <dt>HTML</dt><dd>Hyper-text Markup Language</dd>
  <dt>WWW</dt><dd>World Wide Web</dd>
  <dt>W3C</dt><dd>World Wide Web Consortium</dd>
  <dt>dl</dt><dd>description list</dd>
  <dt>dt</dt><dd>description term</dd>
  <dt>dd</dt><dd>description details</dd>
</dl>

Nested Lists

To be syntactically valid, the only thing that can go inside a list is a list item. A list item is a block element in which you can put most anything, including another list. Lists can be nested this way within other lists, to any level you desire. Here is an unordered list nested within an ordered list which is itself nested inside another ordered list:

  1. List 1 part 1
    1. List 2 part 1
      • List 3 part 1
      • List 3 part 2
    2. List 2 part 2
  2. List 1 part 2

Here is the html source code:

<ol type="1">
  <li>List 1 part 1
    <ol type="i">
      <li>List 2 part 1
        <ul>
          <li>List 3 part 1</li>
          <li>List 3 part 2</li>
        </ul>
      </li>
      <li>List 2 part 2</li>
    </ol>
  </li>
  <li>List 1 part 2</li>
</ol>

Notice how each new list is nested within the a list item of its parent list.

Exercises:

  1. Copy minimal_page.html to a page called unordered.html. Set the title and a top level heading to Unordered List. Create an unordered list with five or more related items of your choosing. Put a second level heading above the list with text decribing what types of items the list contains. A completed exercise might look something like this.
  2. Copy minimal_page.html to a page called ordered.html. Set the title and a top level heading to Ordered List. Create an ordered list with five or more related items of your choosing. Put a second level heading above the list with text decribing what types of items the list contains. A completed exercise might look something like this.
  3. Copy minimal_page.html to a page called description.html. Set the title and a top level heading to Description List. Create a descriptions list with descriptions of the following HTML terms:
    • HTML
    • HTML element
    • HTML tag
    • angle bracket
    • HTML attribute
    • HTML comment
    • HTML object element
    • HTML special character
    Put a second level heading above the description list with HTML Terms as text. Your completed description.html will look something like this, except that it will have completed descriptions.
  4. In this exercise you will need to use nested ordered lists with type attributes to create an outline. Copy minimal_page.html to a page called learning_webdev.html Set the title and a top level heading to Learning Web Development, then use nested ordered lists to create a page that looks like this:

    Learning Web Development screen shot