Learn HTML Onlinetutorials for beginners

There are three types of HTML lists: the unordered list, the ordered list, and the definition list.  The ordered list will display a list with bullets in front of your text.  The numbered list will display a list with numbers in front of your text.  The definition list will display your list with indentations.

Let’s open up our notepads and work on an example.  Copy and paste, or type out the following:

Save it as lists.htm

Understanding the Code

Our first list in this example is an unordered list.  We used the <ul> tag to declare an unordered list.  We then used the <li> tag to display the list with bullets.  In this example, we displayed a list of cities in the state of Florida.

The next list is an ordered list.  Here we declared the ordered list with <ol>.  We used the same <li> tag for the content of the list.  In this example, we displayed a numbered list of cities in the state of California.

In the final example, we used a definition list.  We opened up with the <dl> tag.  We used the <dt> tag to define an item within the list.  In this example the items in the <dt> tags are the continents.  We then used the <dd> tag to describe the items.  In this example the <dd> is a country.  So what we have in this example is a list of continents with countries that belong to that continent.  If you wanted to add another country under Europe,  after the <dd>Spain</dd> you could insert this:

Final Word

As you can see, there is not much to lists.  You may want to display a list on your site.  A couple of examples could be a list of requirements that you have, or a list of your top ten favorite movies.  In a future tutorial, we will revisit lists and learn how to use them for site navigation.