Using an HTML List in Web Design

Ordered lists, unordered lists, and definition lists

Grocery List

James Braund/Getty Images

The HTML language is comprised of a number of different elements. These individual elements act as the building blocks of web pages. Look at the HTML markup for any page on the web and you will see common elements including paragraphs, headings, images, and links. Other elements you are almost certain to see are lists.

There Are Three Types of Lists in HTML

  • Ordered Lists: These are sometimes called numbered lists because, by default, the list items contained in that list have a specific numerical order or ranking. Ordered lists are appropriate where the exact ordering of items are critically important to the meaning of the content. For example, a recipe would likely use an ordered list because the steps presented are not done so in an arbitrary order. The order of those steps is critical to the outcome of that recipe. Any step-by-step process is best presented as an ordered list.
  • Unordered Lists: These are sometimes called bulleted lists because the default visual appearance of an Unordered List is to have small bullet icons in front of the list items. This type of list is best used are for lists that don't have a required order. The list items will appear in whatever order you code them in for the HTML, but you are determining that order and, unlike a recipe or step-by-step process, the order could be changed and the meaning of the content would not suffer. For example, if you make a list of the people you work with, you could order them alphabetically, or based on seniority, or according to departments, etc. Any of these would make sense and the meaning of the list (people you work with) would not change regardless of which option you choose. The order is determined by you and your markup, so exact numbers are not needed. This is a good option for an unordered list.
  • Definition Lists: These are lists of items that have two parts, a term to be defined and the definition. They are commonly used to display a definition/description pair like you would find in a dictionary, but definition lists can also be used for many other kinds of content.

Ordered Lists

Use the <ol> tag (the ending </ol> tag is required), to create a numbered list with numbers starting at 1. The elements are created with the <li> tag pair. For example:

  1. Entry 1
    1. Entry 2
      1. Entry 3 

Use ordered lists anywhere you want to show a specific order for the list items to be followed or to rank items sequentially. Again, these lists are most often found online in instructions and recipes.

Unordered Lists

Use the <ul> tag (the ending </ol> tag is required) to create a list with bullets instead of numbers. Just like with the ordered list, the elements are created with the tag pair. For example:

  • Bullet
    • Bullet
      • Bullet

Use unordered lists for any list that doesn't have to be in a specific order. This is the most common type of list found on a web page. You often see these lists used in website navigation, to display the various links in that menu.

Definition Lists

Definition lists create a list with two parts to each entry: the name or term to be defined and the definition. This creates lists similar to a dictionary or glossary. There are three tags associated with the definition list:

Here is how a definition list looks:

  This is a definition term
 And this is the definition
  definition 2
 definition 3

As you can see, you can have a single term, but give it multiple definitions. Think of the word "Book" definition of a book is a kind of reading material, while another definition would be a synonym for "schedule." If you were coding that, you would use one term, but two descriptions.

You can use definition lists anywhere you have a list that has two parts to each item. The most common use is with a glossary of terms, but you can also use it for an address book (the name is the term and the address is the definition), or many other interesting uses.