We use lists everyday in everything from reading recipes in a cookbook to typing them into the computer when we're coding. Today, I'm going to show you tell you about the 3 basic lists in HTML.

In HTML, you have 3 basic types of lists. You have an ordered list, an unordered list, and a definition list. An ordered list is basically a numbered list. Do you remember when you were little and your teacher told you to number your paper from one to ten? Well everytime you did that you were making an ordered list. In HTML, when we make an ordered list we open it with the <ol> tag and close it with the </ol> tag. The numbers and line breaks will automatically show up where you put the <li> tag.

The next type of list is an unordered list. We all remember those high school days where we had to give that 5 page research paper and we had to give reasons for why we chose that particular side of the situation. Usually when we typed those reasons we did it in a bulleted list. Well guess what, you were making an unordered list! An unordered list begins with the <ul> tag and closes with the </ul> tag. Each item in the list still uses the <li> and </li> tags.

One of the great things about the unordered list is you can even make it so that there are no bullets. When coding, there will be some situations where you might need this so why not learn it now. Look at the code below and you'll see where and how to do it.

Finally, we have the definition list. The example I want to give for the definition list is simply a dictionary. Grab a dictionary and usually they will be set up using this same kind of list. For a definition list, you open it with the <dl> tag and end it with the </dl> tag. Then in front of the word to be defined you will use the <dt> tag and then in front of the definition you will use the <dd> tag.

Replies To: Lists - A Beginner's Guide

One question that's been on my mind about bullets though, can you insert your own image for the bullets?
-I know, kind of silly question, but say you wanted to keep your web theme consistent, this would be good
to know.

One question that's been on my mind about bullets though, can you insert your own image for the bullets?
-I know, kind of silly question, but say you wanted to keep your web theme consistent, this would be good
to know.

Thank you,
-FV

Yes. I don't know how it works with straight HTML, but using CSS you could do this:

To use your own image instead of a bullet in a list you would have to use a definition list. The reason you use a definition list is because it doesn't use bullets so you will have to insert the image before the actual list item.

You can apply it as the list style or as a background image on the li.

Personally I normally do it as a background image and give the li some padding to move the text away from the image. You do not have to use a definition list. You should always use the type of list most relevant to the task.

This post has been edited by PhunkRabbit: 14 September 2010 - 12:57 AM

You can apply it as the list style or as a background image on the li.

Personally I normally do it as a background image and give the li some padding to move the text away from the image. You do not have to use a definition list. You should always use the type of list most relevant to the task.

I agree, you do not have to use a definition list and you should use the type of list most relevant to the task. I was just more familiar with the method that I gave in the example above.

You're looking for a beginner's guide to HTML. This was designed to be an easy to understand guide for people who want to make a list like a bulleted list that you might use in an outline of an essay or something.

I'm sorry that this was not what you needed. I'm sure there are other tutorials on DIC that are exactly what you are looking for.