Week Five | Part One: List Items

HTML Display Characteristics Review Déjà vu

HTML elements (words, pictures, etc.) are written into your Web page code in four different ways:

• In blocks (one element follows the next top-to-bottom).
• In a line (one element follows the next left-to-right.)
• In a list (like this one).
• Not at all (shows in your code, but not in your browser).

In Week Two - Part One we looked at block-level elements. In Week Three - Part One we discovered we could change the display of block-level and in-line elements by means of the display attribute in CSS.

Let's take a few minutes to examine the next type of element --- list item --- and see how we can work it into our designs.

The List Item

The list item is a unique type of block-level element. List items will force other elements underneath them just as common selectors like p, h1, and img.

The difference is that list items will put some sort of marker in front of them. Usually this marker is a bullet or other special character, though it can also be a letter or a number.

List items can be presented in one of three ways:

• Ordered lists - Lists that are lettered or numbered in sequence;
• Unordered lists - Lists are are not lettered or numbered, and;
• Definition lists - Lists used when short left-aligned text precedes longer blocks of indented text.

Building a List

To create a list, you must first decide which type of list you would like to use. The tag for the type you wish to use precedes the items you want to list. For example, let's say you decide on an unordered list with three list items. Here's the code:

<ul> <!-- ul stands for unordered list -->

  <li>This is the first part.</li> <!-- li stands for list item -->

  <li>This is the second part.</li>

  <li>This is the third part.</li>

</ul> <!-- don't forget the closing list tag -->

Your readers would see this:

• This is the first part.
• This is the second part.
• This is the third part.

Remember: the kind of list you chose determines what the specific item in the list will look like. If you choose an ordered list (<ol>) then every item in that list will have an ordered marker (e.g. letter or number). If you choose an unordered list (<ul>) then every item in that list will have an unordered marker (e.g. bullet or box).

Nesting Lists

It is common to see instructional information organized like this:

1. This is an ordered item:
   • This is an unordered item.
     1. Here is an ordered item.
     2. Here is another ordered item.
2. This is an ordered item:
   • This is an unordered item.
     1. Here is an ordered item.
   • This is an unordered item.
     1. Here is an ordered item.
   • This is an unordered item.
     1. Here is an ordered item.

The code for that example is tangled because there are a bunch of nested tags, but the structure is (trust me!) well-formed and valid. Let's take a look:

<ol> <!-- this tag opens the entire list -->
  <li>This is an ordered item:
     <ul> <!-- this tag opens the nested unordered list -->
        <li>This is an unordered item.
            <ol> <!-- this tag opens the nested ordered list -->
                <li>Here is an ordered item.</li>
                <li>Here is another ordered item.</li>
            </ol> <!-- this tag closes the nested ordered list -->
	</li> <!-- this tag closes the list item for the unordered list -->
      </ul><!-- this tag closes the nested unordered list -->
 </li> <!-- this tag closes the first ordered list item -->
   <li>This is an ordered item: <!-- open -->
      <ul> <!-- open -->
        <li>This is an unordered item. <!-- open -->
            <ol> <!-- open -->
                <li>Here is an ordered item.</li>
            </ol> <!-- closed -->
        </li> <!-- closed -->
        <li>This is an unordered item. <!-- open -->
            <ol> <!-- open -->
                <li>Here is an ordered item.</li>
            </ol> <!-- closed -->
        </li> <!-- closed -->
        <li>This is an unordered item. <!-- open -->
            <ol> <!-- open -->
                <li>Here is an ordered item.</li>
            </ol> <!-- closed -->
	 </li> <!-- closed -->
       </ul> <!-- closed -->
   </li> <!-- closed -->
</ol> <!-- this tag closes the entire ordered list -->

Next to nested tables, nested lists are probably the most intricate bit of markup writing you can perform. This may explain why designers shy away from them!

There is something else going on with that example ... something I will touch on a little later in this lecture. For now, please ...

Go to Week 5 Part 2