HTML Lists

HTML lists are used to group related pieces of information together.

Understanding HTML Lists

HTML lists are used to present list of information in well formed and semantic way. There are three different types of list in HTML and each one has a specific purpose and meaning:

  • Unordered list — Used to group a set of related items, in no particular order.
  • Ordered list — Used to group a set of related items, in a specific order.
  • Description list — Used to display a list of terms and their descriptions.
 

Note:Inside a list item you can put text, line breaks, images, links, etc. You can also place an entire list inside a list item to create nested list.

In this tutorial we will cover all these different list types one by one:

HTML Unordered Lists

An unordered list created using the <ul> tag, and each list item starts with the <li> tag.

The list items in unordered lists are marked with bullets (small black circles), by default.

  • <ul>
  •     <li>Chocolate Cake</li>
  •     <li>Black Forest Cake</li>
  •     <li>Pineapple Cake</li>
  • </ul>

— The output of the above example will look something like this:

  • Chocolate Cake
  • Black Forest Cake
  • Pineapple Cake

HTML Ordered Lists

An ordered list, created using the <ol> tag, and each list item starts with the <li> tag. Ordered list contain information where order should be emphasized.

The list items in ordered lists are marked with numbers.

  • <ol>
  •     <li>Mix ingredients</li>
  •     <li>Bake in oven for an hour</li>
  •     <li>Allow to stand for ten minutes</li>
  • </ol>

— The output of the above example will look something like this:

  1. Mix ingredients
  2. Bake in oven for an hour
  3. Allow to stand for ten minutes

HTML Definition Lists

A definition list is a list of items, with a description of each item.

The definition list created using <dl> tag. The <dl> tag is used in conjunction with <dt> — defines the item in the list, and <dd> describes the item in the list:

  • <dl>
  •     <dt>Bread</dt>
  •     <dd>A baked food made of flour.</dd>
  •     <dt>Coffee</dt>
  •     <dd>A drink made from roasted coffee beans.</dd>
  • </dl>

— The output of the above example will look something like this:

Bread
A baked food made of flour.
Coffee
A drink made from roasted coffee beans.
 
Close

Your Feedback:

 

We would love to hear from you! Please say something.