How to Make Ordered, Unordered and Description Lists in HTML

John on January 15, 2021

A list in HTML is used to semantically present a collection of items. Currently, there are three types of HTML lists; ordered, unordered and description. In this tutorial, we will learn how to use each of these.

Ordered Lists

Ordered lists are created with the ol tag and each list item is defined with an li tag. Let's create an ordered list to demonstrate how they work.

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

     1. First item

     2. Second item

     3. Third item

As we can see from the above example the default styling of ordered lists is to have a number before each list item. The numbers start at 1 and increment; to change the start number add the start attribute to the ol tag with the number start from.

<ol start="4">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

     4. First item

     5. Second item

     6. Third item

Unordered Lists

Unordered lists are created with ul tag and each list item is defined in an li tag.

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

     • First item

     • Second item

     • Third item

The default styling of an unordered list is to have a bullet point before each list item.

Description Lists

HTML Description lists are used to contain collections of items that have definitions. One example of this might be a food menu with the name of each dish followed by a short description of it.

Description lists are created with the dl tag. Each list item is defined by a dt (term/name) tag followed by a dd (description) tag.

<dl>
  <dt>Margherita Pizza</dt>
  <dd>Fresh tomatoes, fresh mozzarella, fresh basil.</dd>

  <dt>Chicken Pizza</dt>
  <dd>Fresh tomatoes, mozzarella, chicken, onions.</dd>

  <dt>Meat Feast Pizza</dt>
  <dd>Fresh tomatoes, mozzarella, hot pepporoni, hot sausage, beef, chicken.</dd>
</dl>

Change List Style

We can change the bullet style of an HTML list using the list-style-type CSS property. Let's create an unordered list with a class and change the bullet style to squares with CSS.

<ul class="square-list">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

.square-list {
  list-style-type: square;
}

Conclusion

You now know how to use different types of HTML lists and how to style them with CSS.