Lists

Sometimes it is necessary to list information on a web page. In fact, web surfers seem to prefer lists instead of descriptive paragraphs most of the time. It's probably because lists are easier to read and understand when viewed on a computer screen.

What is a list? It is exactly what it sounds like - a list of lines of information. Each line in a list is a list element, and you can have as many list elements as you like.

Let's create a simple bulleted list. The HTML code below will create a three line list.

<ul>
  <li>This is line #1</li>
  <li>This is line #2</li>
  <li>This is line #3</li>
</ul>

Which will appear as below when displayed in your browser.

• This is line #1
• This is line #2
• This is line #3

You can change the bullet character if you wish.

<ul type="circle">
  <li>This is line #1</li>
  <li>This is line #2</li>
  <li>This is line #3</li>
</ul>

The "type" attribute changes the bullet to a circle as shown below.

• This is line #1
• This is line #2
• This is line #3

You can create a numbered list using the HTML tags shown below.

<ol>
  <li>This is line #1</li>
  <li>This is line #2</li>
  <li>This is line #3</li>
</ol>

This will appear as follows in your output.

1. This is line #1
2. This is line #2
3. This is line #3

You can get a little more fancy if  you like by including the "type" attribute. An example of this is below.

<ol type="A">
  <li>This is line #1</li>
  <li>This is line #2</li>
  <li>This is line #3</li>
</ol>

Which produces an alphabetic list.

1. This is line #1
2. This is line #2
3. This is line #3

You can also produce lower case alphabetic, upper case roman numerals and lower case roman numerals at the start of each line (see "OL" for more information).

Now let's get even more fancy by putting a graphic image as the bullet. All you need to do is add the "imagesrc" attribute to the "UL" tag. This can be very attractive.

<ul imagesrc="http://www.internet-tips.net/SiteMap/Bd21298_.gif">
  <li>This is line #1</li>
  <li>This is line #2</li>
  <li>This is line #3</li>
</ul>

You can see how good this looks:

	This is line #1
	This is line #2
	This is line #3

You want to get even cooler? You can nest the lists as shown below.

<ul imagesrc="http://www.internet-tips.net/SiteMap/Bd21298_.gif">
  <li>This is line #1</li>
  <li>This is line #2
    <ol>
      <li>This is a nested line #1</li>
      <li>This is a nested line #2</li>
    </ol>
  </li>
  <li>This is line #3</li>
</ul>

This will produce the following display. As you can see, you can mix the various types of lists (in this case a bulleted list with a numeric list) as you see fit.

	This is line #1
	This is line #2 This is a nested line #1 This is a nested line #2
	This is line #3

And that, literally, is all there is to lists. Yes, there are some additional list tags, but if you understand this lesson you will be able to create just about any list that you need.